Quick Ways to Experiment with Viewer SDK

If you're getting started with Autodesk Platform Services, and you're curious about what the Viewer SDK can do, here's a couple of options that let you experiment with the viewer without having to build a web application of your own:

Live Demos

The developer advocacy team provides plenty of code samples, and many of these also include a live demo. And the cool part is, since the viewer is basically a JavaScript component running inside the browser, you can use developer tools that are available in any modern browser nowadays to interact with it!

Try the following:

1. Open https://aps-simple-viewer-nodejs.autodesk.io/ in a modern browser such as Chrome, Firefox, Safari, or Edge
2. After the web application loads, open the developer tools; this is typically done via Ctrl+Shift+I on Windows, or Command+Option+I on macOS (see this MDN article for more details)
3. While in the developer tools, open the console tab, and try some of the commands below:

• NOP_VIEWER.setLightPreset(4) sets the viewer's background environment to the preset #4; you can find the list of all environments in the viewer settings in the Environments section
• NOP_VIEWER.setGroundShadow(false) disables ground shadows
• NOP_VIEWER.setGroundReflection(true) enables ground reflections
• NOP_VIEWER.getSelection() returns the list of IDs of currently selected design elements
• NOP_VIEWER.search('glass', console.log, console.error) searches through all the design metadata, and returns the IDs of any objects that contain the word "glass" somewhere in their properties

Once you have one or more object IDs, you can also try some of these additional commands (replacing the <id> placeholders with the actual IDs):

• NOP_VIEWER.getProperties(<id>, console.log, console.error) lists all metadata of an object with the given ID
• NOP_VIEWER.isolate([<id>, <id>, <id>]) isolates objects with the given IDs; all other design elements become semi-transparent or completely hidden depending on the viewer settings
• NOP_VIEWER.fitToView([<id>, <id>, <id>]) zooms the camera to focus on objects with the given IDs

To find other methods available on the viewer instance, check out the Autodesk.Viewing.Viewer3D class reference.

Note #1: NOP_VIEWER is a global variable referring to the first viewer instance that's been created on the webpage. It's meant for debugging and exploring, and should not be used in production applications.

Note #2: some of the viewer methods accept a success callback (function to be called when an asynchronous operation completes successfully) and an error callback (function to be called when an asynchronous operation fails). In the examples above we just use console.log and console.error so that the results - whether successful or not - are simply output to the browser console.

Codepens

There's also an official https://codepen.io account where you can find useful code snippets, and what's more important, you can fork, tweak, and save these snippets for your own reference.

Try the following:

1. Open https://codepen.io/autodesk-platform-services/pen/MWqmXxG?editors=0010 in the browser
2. In the JS tab, add the following snippet to the end of the original code:

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
    viewer.search('concrete', function (ids) {
        viewer.isolate(ids);
    });
});

Now, as soon as any model is loaded into the viewer, we find all objects that contain the word "concrete" somewhere in their metadata, and isolate them.

Oh, and you can embed codepens in other websites, too!