同步浏览多个视图

有些时候，我们需要分屏同时查看同一个模型，或者同时查看不同的模型，这里有两种方式参考。方法一. 使用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()) }); }