Autodesk forge React中的Autodesk Forge viewer v7

我正在尝试自定义GuiViewer3d工具栏。以下是此链接中的步骤： 不确定到底出了什么问题，但以下是我目前正在做的

下面是我加载脚本的方式（组件装载时使用效果）

加载所有内容后，我将创建扩展并启动查看器：

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

}

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

---

我修改了我在这篇博文中使用的代码，以便在onToolbarCreated（）中创建一个工具栏按钮，它似乎工作得很好：它使用的是typescript，但看一看可能还是有帮助的

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

}

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