同步浏览多个视图

44次阅读

共计 2019 个字符,预计需要花费 6 分钟才能阅读完成。

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

});
}

正文完
 0