问题描述
我正在尝试自定义 GuiViewer3d 工具栏。按照此链接中的步骤操作:https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/toolbar-button/ 不确定到底出了什么问题,但这是我目前所做的
这是我加载脚本的方式(useEffect on component mount)
const script = document.createElement('script')
script.src = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js'
script.async = true
script.onload = () => setDeskLoaded(true)
document.body.appendChild(script)
加载完所有内容后,我正在创建扩展并启动查看器:
function ToolbarExtension(viewer: any,options: any) {
window.Autodesk.Viewing.Extension.call(viewer,options)
}
console.log(ToolbarExtension)
ToolbarExtension.prototype = Object.create(window.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()
console.log('extension manager registered')
return true
}
ToolbarExtension.prototype.unload = function () {
// nothing yet
}
window.Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension',ToolbarExtension)
displayViewer()
function displayViewer() {
const options = {
env: 'AutodeskProduction',api: 'derivativeV2',accesstoken: accesstoken
}
const config3d = {
extensions: ['ToolbarExtension']
}
const documentId = 'urn:' + urn
let viewerApp: any
window.Autodesk.Viewing.Initializer(options,onInitialized)
function onInitialized() {
const htmlDiv = document.getElementById('forgeViewer')
viewerApp = new window.Autodesk.Viewing.GuiViewer3D(htmlDiv,config3d)
const startedCode = viewerApp.start()
}
window.Autodesk.Viewing.Document.load(documentId,onDocumentLoadSuccess)
function onDocumentLoadSuccess(viewerDocument: any) {
const viewerapp = viewerDocument.getRoot()
const md_ViewerDocument = viewerDocument // Hold the viewerDocument in a global variable so that we can access it within SelectViewable()
const md_viewables = viewerapp.search({ type: 'geometry' })
const sel = document.getElementById('viewables')
for (let i = 0; i < md_viewables.length; i++) {
const opt = document.createElement('option')
opt.innerHTML = md_viewables[i].data.name
opt.value = md_viewables[i].data.name
sel && sel.appendChild(opt)
}
viewerApp.loadDocumentNode(viewerDocument,md_viewables[0])
if (md_viewables.length > 1) {
const viewablesDIV = document.getElementById('viewables_dropdown')
}
}
}
我现在需要添加将两个按钮添加到工具栏的代码块,但是如果我将它包含在 onDocumentLoadSuccess 函数中,那么它将无法识别 ToolbarExtension。我还尝试在创建工具栏扩展的同一个地方实施 onToolbar 负载检查,但也没有奏效。这应该如何构建??
ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
// alert('Todo: customize Viewer toolbar');
var viewer = this.viewer
// Button 1
var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button')
button1.onClick = function (e) {
viewer.setEnvMapBackground(true)
}
button1.addClass('show-env-bg-button')
button1.setToolTip('Show Environment')
// Button 2
var button2 = new Autodesk.Viewing.UI.Button('hide-env-bg-button')
button2.onClick = function (e) {
viewer.setEnvMapBackground(false)
}
button2.addClass('hide-env-bg-button')
button2.setToolTip('Hide Environment')
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar')
this.subToolbar.addControl(button1)
this.subToolbar.addControl(button2)
toolbar.addControl(this.subToolbar)
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)