同步瀏覽多個視圖

有些時候，咱們須要分屏同時查看同一個模型，或者同時查看不一樣的模型，這裏有兩種方式參考。

方法一. 使用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())

          }); 
      }