如何在单个网页中加载两个伪造查看器

Question

我正在尝试在一个网页中添加两个伪造查看器。我正在使用“react-forge-viewer”npm 包来执行此操作，但由于某种原因，只有一个查看器被加载，另一个保持在“正在启动查看器...”状态。如果有人能帮我解决这个问题，那就太好了。

我认为这可能是因为依赖于类名或 ID。

另外，我想以这样一种方式同步他们的事件，如果我通过拖动查看器来更改相机视图，同样的事情也应该反映在另一个查看器上。

Answer 1

您可以轻松地将多个查看器组合在一起，只需确保使用不同的容器 div 分别初始化它们：

 var viewer1 = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv1'));
 var viewer2 = 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(...);
 });

您可以通过订阅CAMERA_CHANGE_EVENT 来同步两个查看器的状态，但要注意诸如无限循环之类的陷阱 - 您可以通过实施关键块来克服这个问题，以确保只有一个查看器专门请求另一个查看器在任何时间同步给定时间：

   viewer1.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
   {
        //critical block to prevent endless chained loop of events 
        viewer2.restoreState(viewer1.getState())
   });   

   viewer2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
   {
        //critical block to prevent endless chained loop of events 
        viewer1.restoreState(viewer2.getState())
   }); 

查看工作示例here。

P.S:react-forge-viewer 是第三方软件包 not authored by Autodesk，如其​​自述文件中所述，因此如果您有任何问题，可能需要联系其作者。