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

Question

我在view3D v2.11，React，ES6和webpack中编写代码。但我不知道如何在webpack和React中编写Autodesk.Viewing.Extensions。任何人都可以给我一些例子吗？

Answer 1

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

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

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

就React和查看器而言，这并不相关，因为查看器是一个动态创建的3D组件，所有WebGL画布和查看器2D元素都是在应用加载模型后生成的，而React可以让您在应用程序启动时声明2D组件。我被打了一下，用动态注射反应的组分给观众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的应用程序，但它应该给你一个想法。

希望有所帮助。