##Description
A collection of various JavaScript extensions for the viewer, showing what is doable with the client-side JavaScript API.
##Dependencies
Some extensions are dependent on specific files which are placed in the same directory. Dependencies need to be loaded before loading the extension, using a simple script tag in your html or dynamically using require or equivalent. The path of dependencies needs to be modified accordingly to your setup.
##Setup/Usage Instructions
There are two ways to load an extension with viewer API:
-
Load extensions when viewer is initialized:
var viewerElement = document.getElementById('viewer'); viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, { extensions: ['BasicExtension'] }); Autodesk.Viewing.Initializer(options, function () { viewer.start(); loadDocument(viewer, options.document); });
Please refer to this sample for detail.
-
Load extensions dynamically on demand:
//load extension for SEO viewer.loadExtension('Autodesk.ADN.Viewing.Extension.SEO');
Please refer to this blog post for detail.
##Description
Here is a quick description of what each extension is doing. Click on each extension name to test them directly on the gallery
Creates 2D annotations for selected component using its label. Uses CAMERA_CHANGED_EVENT to update position of the 2D marker when view is updated.
A basic Hello World extension that displays an alert dialog upon loading and unloading.
A Hello World extension but written using ES6/ES2015 syntax. Needs transpiling with a tool like Babel or Traceur before being used with the viewer.
Displays a bounding box around the selected component.
Displays a PieChart and a dropdown menu listing all available model properties. When a pie is selected in the chart, isolates the specific components.
Illustrates how to customize the viewer context menu for zero-selection menu or item specific menu.
A basic viewer tool that just dumps events in the console, useful for testing and debugging or using as a tool boilerplate.
A basic docking panel demo.
Creates a panel which lets user activates any event available in the API. Output event arguments to a section.
Creates a camera animation using a custom tool, rotating eye position around the model.
Illustrates how to snap geometry: vertices, edges, faces and how to create selection commands to let user pick geometry on the model.
Creates hotkeys to switch viewer to fullscreen.
Creates a simple docking panel containing an iframe.
Iterates through layers. Valid only for 2D drawings.
Changes material of selected component. Supports color and textures.
A wrapper around the Autodesk.Measure extension to enable/disable it from the gallery.
Access mesh data of selected component, vertices and edges to represent them graphically.
Imports custom json into the viewer and creates three.js meshes from it.
Adds some extra hardcoded properties to viewer property panel.
Loads extra models inside current one. Designed to work on the gallery.
Dumps model structure to browser console.
Custom model structure panel behavior.
Transforms selected component based on mouse position.
Realtime physics with ammo.js
Dumps properties for selected component in browser console.
Custom panel derived from property list panel
Inserts custom data into viewer property panel.
Uses microsoft translation API to translate property panel values on the fly.
- Autodesk.ADN.Viewing.Extension.SEO
Ouputs the properties values into a hidden div tag so that the properties can be indexed by search engine
Creates a panel that lets you manage screenshots taken with the API.
A wrapper around the Autodesk.Section extension to enable/disable it from the gallery.
Various toolbar controls customization example.
A 3d controls that lets user precisely move components around along specific plane or axis.
Illustrates on to create a docking panel more advanced than the basic docking panel extension.
A demo extension which illustrates several concepts of the API. See the complete tutorial for more details.
This sample is licensed under the terms of the MIT License. Please see the LICENSE file for full details.
##Written by
Written by Philippe Leefsma