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，如其自述文件所述，因此，如果遇到问题，您可能需要联系其作者。

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

1 个答案: