Как написать Autodesk.Viewing.Extensions с webpack и реагировать?

Question

Я писал код в пределах view3D v2.11, React, ES6 и webpack. Но я не знаю, как писать Autodesk.Viewing.Extensions внутри webpack и React. Может ли кто-нибудь показать мне несколько примеров?

Answer 1

Использование webpack для написания расширения для зрителя ничем не отличается от использования webpack для записи любого другого приложения js. Взгляните на мою библиотеку репозиториев расширений, каждое расширение вставляется в отдельный .js или .min.js, строите ли вы проект в dev или prod: library-javascript-viewer-extensions.

Это предусмотрено таким образом, чтобы каждое расширение можно было загружать динамически независимо, однако, если вы создаете целое приложение вокруг средства просмотра, вы можете просто включить код для каждого расширения вместе с остальной частью приложения и создать единый веб-пакет расслоение.

Этот проект React содержит несколько расширений для просмотра (некоторые из них извлечены из упомянутой выше библиотеки) и связывает код расширения вместе с остальной частью приложения: forge-rcdb.

Что касается React и viewer, это не очень важно, потому что зритель представляет собой трехмерный компонент, который создается динамически, все 2D-элементы 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 приложения, но оно должно дать вам представление.

Надеюсь, что это поможет.