8 Mar 2023
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:
- Open https://aps-simple-viewer-nodejs.autodesk.io/ in a modern browser such as Chrome, Firefox, Safari, or Edge
- After the web application loads, open the developer tools; this is typically done via
Ctrl
+Shift
+I
on Windows, orCommand
+Option
+I
on macOS (see this MDN article for more details) - 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 sectionNOP_VIEWER.setGroundShadow(false)
disables ground shadowsNOP_VIEWER.setGroundReflection(true)
enables ground reflectionsNOP_VIEWER.getSelection()
returns the list of IDs of currently selected design elementsNOP_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 IDNOP_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 settingsNOP_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
andconsole.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:
- Open https://codepen.io/autodesk-platform-services/pen/MWqmXxG?editors=0010 in the browser
- 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!