React 中的 Autodesk Forge 查看器 v7

如何解决React 中的 Autodesk Forge 查看器 v7

我正在尝试自定义 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()

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)
}

• 我正在添加窗口。在 Autodesk 之前，因为这是访问它的唯一方法（我还修改了 window 的全局界面，因为没有类型错误）