Customizing the Toolbar
Customizing a toolbar is best explained by looking at an example.
This example creates a custom toolbar with two buttons on the Viewer canvas. Each button has its own tooltip and reacts to click events. Clicking one button displays the environment background, while clicking the other hides it.

Before You Begin
The customization logic is is implemented as an extension.
function ToolbarExtension(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
}
ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
ToolbarExtension.prototype.constructor = ToolbarExtension;
ToolbarExtension.prototype.load = function() {
// Set background environment to "Infinity Pool"
// and make sure the environment background texture is visible
this.viewer.setLightPreset(6);
this.viewer.setEnvMapBackground(true);
// Ensure the model is centered
this.viewer.fitToView();
return true;
};
ToolbarExtension.prototype.unload = function() {
// nothing yet
};
Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);
Step 1: Detect the Toolbar
In the custom extension, override base class method onToolbarCreated
. The Viewer will invoke this method as soon as the toolbar is available to the extension.
ToolbarExtension.prototype.onToolbarCreated = function(toolbar) {
alert('TODO: customize Viewer toolbar');
};
Step 3: Cleanup
Extensions should remove any DOM elements and events they add.
In this case, only this.subToolbar
must be removed.
ToolbarExtension.prototype.unload = function() {
if (this.subToolbar) {
this.viewer.toolbar.removeControl(this.subToolbar);
this.subToolbar = null;
}
};
As explained in Writing an Extension, you can verify that the extension works as expected by manually
calling the viewer.loadExtension('ToolbarExtension')
and viewer.unload('ToolbarExtension')
methods.