Search code examples
autodesk-forgeautodeskautodesk-bim360

load 2D & 3D forge viewers in single web page

I would like to link between elements from the 2D sheet and 3D model, so when I select the element from 2D it should reflect and select (isolate) in the 3D also if I change the color it does the same on both e.g. and the other way around.

so I can use the document browser extensions to open the 2d sheet on 1st viewer and the 3d model on the 2nd viewer:

enter image description here

const firstModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv1'));
 const secondModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv2'));

 Autodesk.Viewing.Initializer(options1, function() {
  viewer1.start();
  viewer1.load(...);      
 });

 Autodesk.Viewing.Initializer(options2, function() {
  viewer2.start();
  viewer2.load(...);
 });

if the example above is correct I am still missing how to links both viewers. I hope someone could help me with this issue

Solution

  • Note that we have a viewer extension that might already give you what you're looking for: https://github.com/Autodesk-Forge/forge-extensions/blob/master/public/extensions/NestedViewerExtension/README.md.

    If you want to implement the cross-selection between two viewer instances yourself, you can. Just subscribe to the SELECTION_CHANGED event in one of the viewers, get the selected IDs, and select the same IDs in the other viewer using the usual viewer.select([...]); method.

    Btw. regarding your code snippet:

    • the Autodesk.Viewing.Initializer only needs to be called once per the entire webpage
    • the Autodesk.Viewing.Private.GuiViewer3D instances should be created after the initializer has done its work