webpackでAutodesk.Viewing.Extensionsを作成して反応する方法は？

Question

私はview3D v2.11、React、ES6、webpack内にコードを書いていました。しかし、私はwebpackとReactにAutodesk.Viewing.Extensionsを書く方法を知らない。誰か私にいくつかの例を教えてもらえますか

Answer 1

webpackを使用してビューア拡張を書き込むことは、webpackを使用して他のjsアプリケーションを書き込むことと変わりありません。私の拡張ライブラリのレポを見てみましょう。各拡張子は、dev/prod：library-javascript-viewer-extensionsでプロジェクトをビルドしても、個別の.jsまたは.min.jsにバンドルされています。

これは、各エクステンションを個別に動的に読み込むことができるように設計されていますが、ビューアの周りにアプリケーション全体を構築する場合、各エクステンションのコードを残りのアプリケーションと共に含めて、バンドル。

このReactプロジェクトには、複数のビューア拡張機能（上記のライブラリからいくつかのものが抽出されています）と、拡張コードと他のアプリケーション（forge-rcdb）がバンドルされています。

ビューアが動的に作成された3Dコンポーネントであり、アプリケーションがモデルを読み込んだ後にすべてのWebGLキャンバスとビューアの2D要素が生成されているため、Reactとビューアに関する限り、あまり関係はありません。アプリの起動時に2Dコンポーネントを宣言します。私はその後、componentDidUpdateをオーバーライドすることで、これらの動的コンポーネントをレンダリング

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() { 

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

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

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

私は、視聴者のdivにコンポーネントを反応させるの動的注入で少し遊んでいた、あなたはその同じプロジェクトhereで見てみることができますそしてthereは使用例です：

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

私は実際にのそれを使用して任意の機能を実装していませんアプリの、それはあなたにアイデアを与える必要があります。

希望に役立ちます。