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

Question

我想在一个网页中添加两个 forge 查看器。我正在使用 "react-forge-viewer" npm 包来执行此操作，但出于某种原因，只有一个查看器被加载，另一个查看器处于 "starting viewer..." 状态。如果有人能帮我解决这个问题就太好了。

我认为这可能是因为依赖 class 名称或 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，如其自述文件中所述，因此如果您遇到问题，可能需要联系其作者。

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

How to load two forge viewers in single web page

autodesk-viewer

autodesk-forge