官方api地址:
https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/toolbar-button/
图标库参考:https://getbootstrap.com/docs/3.3/components/
本次需求要自定义图标
引入boost
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
扩展js
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() {
return true;
};
ToolbarExtension.prototype.unload = function() {
if (this.subToolbar) {
this.viewer.toolbar.removeControl(this.subToolbar);
this.subToolbar = null;
}
};
ToolbarExtension.prototype.onToolbarCreated = function(toolbar) {
var viewer = this.viewer;
// Button 1
var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button');
button1.onClick = function(e) {
if (intervalBool) {
clearInterval(interval );
}else {
interval = setInterval(zizhuan, 100);
}
intervalBool = !intervalBool;
};
button1.setIcon('glyphicon')
button1.icon.classList.add( 'glyphicon-play' );
button1.setToolTip('自转');
// Button 2
var button2 = new Autodesk.Viewing.UI.Button('hide-env-bg-button');
button2.onClick = function(e) {
tipsBool = !tipsBool;
};
button2.setIcon('glyphicon')
button2.icon.classList.add( 'glyphicon-eye-open' );
button2.setToolTip('显示tips');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar');
this.subToolbar.addControl(button1);
this.subToolbar.addControl(button2);
toolbar.addControl(this.subToolbar);
};
Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);