同步浏览多个视图

有些时候，咱们须要分屏同时查看同一个模型，或者同时查看不一样的模型，这里有两种方式参考。

方法一. 使用Forge Viewer 6.2 开始 提供的Autodesk.SplitScreen扩展。该扩展能够在同一个Viewer实例中建立2-4个视口 （ViewerPort），减小Viewer的实例和内存消耗，并且提供了漫游同步等功能。

使用很简单，若是是分屏同时查看同一个模型，先加载模型，而后启动该扩展：

Viewer.loadExtension('Autodesk.SplitScreen').then(function(res){
    //若是想拿到扩展的句柄
    splitExt = res
})

默认分红两个屏

若是是3个或4个视口，在启动此扩展的时候，传入以下选项：

var options = {  viewports: [
            function(id) { return id === 1; },
            function(id) { return id === 1; }, 
            function(id) { return id === 1; },  
            function(id) { return id === 1; }          ]
     };
viewer.loadExtension('Autodesk.SplitScreen', options);

其中1是该模型在viewer中的model序号

若是不一样视口查看不一样的模型，则须要先加载多个模型（参考关于模型聚合的资料），而后再传入参数中指定哪一个视口用哪一个模型：

var options = {  viewports: [
            function(id) { return id === 1; },
            function(id) { return id === 2; }, 
            function(id) { return id === 3; },  
            function(id) { return id === 4; }          ]
     };
viewer.loadExtension('Autodesk.SplitScreen', options);

虽然分屏的扩展比较方便，但从测试发现，当前选择对象的时候有些问题，另外，也未看到能禁止同步浏览，让不一样的视口有不一样的视角。要达到这个目的，能够考虑方法2.

方法二： 在多个Viewer实例中，分别加载模型，因为是独立的，控制不一样的视角就很方便了。而假设须要viewer进行同步，则能够监控多个Viewer相机事件，当某一个发生变化，根据其参数操做其它Viewer的相机。至于选择对象，也相似，监控双方的选择集事件，相互操做。 因为Viewer的State具有了相机以及其它信息，用来操做更为简便。

有一点要注意：假设Viewer1的相机事件发生，驱动Viewer2的相机事件，但这时Viewer2的相机事件又触发了，又会驱动Viewer2的状态，这就会产生死循环。我没看到Viewer中提供方法判断哪一个是当前激活窗口或哪一个在进行视图操做，但起码能够对Viewer各自的DIV判断鼠标的聚焦和移除，所以加上一些标志能解决。或许还有更好的办法.

如下代码示意假设两个Viewer都加载模型完毕，并在适当的时候委托了相机事件。

var viewer1;
        var viewer2;

        //鼠标在Viewer1
        var isNavigatingViewer1 = false;
        //鼠标在Viewer2 
        var isNavigatingViewer2 = false;

        $(document).ready(function () {

        $( "#MyViewerDiv1" )
            .mouseenter(function() {
                isNavigatingViewer1 = true;
            })
            .mouseleave(function() {
                isNavigatingViewer1 = false;

            })

            $( "#MyViewerDiv2" )
            .mouseenter(function() {
                isNavigatingViewer2 = true; 
            })
            .mouseleave(function() {
                isNavigatingViewer2 = false; 
            })
         })
            
       //.....  
            
       {
         // 适当的函数，确保两个Viewer都加载模型完毕
         
           viewer1.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
            {
                if(isNavigatingViewer1)
                    viewer2.restoreState(viewer1.getState())
                    //或只用相机
                    //viewer2.applyCamera(viewer1.getCamera())

             });
             
           viewer2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
            {
                if(isNavigatingViewer2)
                    viewer1.restoreState(viewer2.getState())
                     //或只用相机
                    //viewer1.applyCamera(viewer2.getCamera())

          }); 
      }