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

Question

我在 view3D v2.11、React、ES6 和 webpack 中编写代码。但是我不知道如何在webpack和React中写Autodesk.Viewing.Extensions。谁能给我一些例子吗？

Answer 1

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

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

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

就 React 和查看器而言，它不是很相关，因为查看器是一个动态创建的 3D 组件，所有 WebGL canvas 和查看器 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 并做出反应？

How to write Autodesk.Viewing.Extensions with webpack and react?

reactjs

webpack

autodesk-forge