1、 通过属性和接口获取鼠标拾取(Pick)的物体
2、 通过事件获取鼠标拾取的物体
3、 区域 Pick 物体
4、 pickedResultFunc设置拾取对象回调函数
在开发数字孪生可视化场景利用时常常会用到拾取性能,顾名思义,在数字孪生可视化场景中拾取就是判断一个数字孪生可视化场景中哪个对象被点击。数字孪生可视化场景中的模型十分多,不可避免须要一些交互成果。比方当点击某一个模型的时候做出反馈动作,这须要可能通过鼠标的点击地位推导出点击到的模型,这种技术实现称为拾取。
在数字孪生可视化场景中模型比拟多的时候,应该如何高效的实现拾取操作呢?上面介绍四种办法:
1、通过属性和接口拾取(Pick)物体
通过平台提供的属性和接口能够获取鼠标拾取到(Pick)的物体,将上面的代码输出到我的项目文件中,就会在日志窗口输入以后拾取和之前拾取的数字孪生可视化物体。
代码如下:
// 每一帧判断拾取的物体是否发生变化app.on('update', function () { if (app.picker.isChanged()) { console.clear(); // 日志窗口输入以后被pick的物体 if (app.picker.objects[0]) { console.log('以后拾取的物体 ' + app.picker.objects[0].name); } // 打印之前被pick的物体 if (app.picker.previousObjects[0]) { console.log('之前拾取的物体 ' + app.picker.previousObjects[0].name); } }});
2、通过事件获取鼠标拾取的物体
通过事件获取鼠标拾取的物体,能够通过 MouseEnter 和 MouseLeave 事件来实现 。将上面的代码输出到我的项目文件中,即可给鼠标拾取到的对象增加边框。
代码如下:
// 鼠标拾取物体显示边框app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) { ev.object.style.outlineColor = '#FF0000';});// 鼠标来到物体边框勾销app.on(THING.EventType.MouseLeave,'.Thing', function(ev) { ev.object.style.outlineColor = null;});
3、区域 Pick 物体
通过鼠标框选一个数字孪生可视化区域获取区域内的物体,能够参考上面代码依据理论需要进行框选物体的获取。
// 因为框选比拟耗费性能,因而事后设置框的“候选集”,只在候选集中框选var things = app.query('.Thing');app.picker.areaCandidates = things; // 启动框选 传入 鼠标按下时开始框选的屏幕坐标app.picker.startAreaPicking({ x: x, y: y});//完结框选app.picker.endAreaPicking();
4、pickedResultFunc设置拾取对象回调函数
pickedResultFunc设置拾取对象回调函数,能够参考上面的代码依据具体需要实现对应成果。
代码如下:
// 批改进入层级抉择设置// {String} ev.level 以后层级标识枚举值 可通过 THING.LevelType 获取枚举值,如修建层级标识为 THING.LevelType.Building// {THING.BaseObject} ev.object 以后层级对象(将要进入的层级对象)// {THING.BaseObject} ev.current 以后层级对象(将要进入的层级对象)// {THING.BaseObject} ev.previous 上一层级对象(来到的层级对象)app.on(THING.EventType.EnterLevel, '.Building', function (ev) { app.picker.pickedResultFunc = function (obj) { return obj; }}, 'customLevelPickedResultFunc');// 暂停修建层级的默认抉择行为app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);
————————————————
数字孪生可视化:https://www.thingjs.com/