Question

我在view3D v2.11，React，ES6和webpack中编写代码。但我不知道如何在webpack和React中编写Autodesk.Viewing.Extensions。有人能告诉我一些例子吗？

Answer 1

使用webpack编写查看器扩展名与使用webpack编写任何其他js应用程序没什么不同。看一下我的扩展库repo，无论你是用dev还是prod构建项目，每个扩展都捆绑在一个单独的.js或.min.js中。library-javascript-viewer-extensions。

这是以这种方式设计的，因此每个扩展都可以独立动态加载，但是如果你围绕查看器构建整个应用程序，你可以简单地包含每个扩展的代码以及应用程序的其余部分并生成一个webpack包

此React项目包含多个查看器扩展（有些是从上面提到的库中提取的），并且正在将扩展代码与应用程序的其余部分捆绑在一起：forge-rcdb。

就React和观众而言，它不是很相关，因为查看器是动态创建的3D组件，所有WebGL画布和查看器2D元素都是在应用加载模型后生成的，而React可以让你在应用程序启动时声明2D组件。我正在玩一些动态React组件注入到查看器div，你可以看看同一个项目here：

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)

// Experimental !
// This this to render dynamic components
// inserted after the viewer div has been created

const reactViewerNode = document.createElement('div')

this.viewer.container.appendChild(reactViewerNode)

this.viewer.react = {
    node: reactViewerNode,
    components: [],
    addComponent: (component) => {

      this.viewer.react.components.push(component)
    },
    render: (props) => {

      ReactDOM.render(
        <div>
        {
          React.Children.map(
            this.viewer.react.components,
            (child) => React.cloneElement(child, props))
          }
        </div>,
        reactViewerNode)
    }
  }

然后我通过覆盖componentDidUpdate：

来渲染这些动态组件

componentDidUpdate () {

 if (this.viewer && this.viewer.react) {

   if(this.viewer.react.components.length) {

    this.viewer.react.render(this.props)
   }
 }
}

和there是一个使用示例：

viewer.react.addComponent(
    <DBDropdown key="test" className="react-div">
    </DBDropdown>
)

我实际上没有在应用的live version中使用该功能实现任何功能，但它应该会给你一个想法。

希望有所帮助。

如何使用webpack编写Autodesk.Viewing.Extensions并做出反应？

1 个答案: