当前位置: 首页 > Web前端 > HTML

从零开始学习3D可视化拾取

时间:2023-04-02 22:52:28 HTML

1.通过属性和接口获取鼠标拾取的物体2.通过事件获取鼠标拾取的物体3.拾取区域中的物体4.PickedResultFunc设置回调函数数字化开发中被拾取对象的拾取功能常用于孪生可视化场景的应用。顾名思义,数字孪生可视化场景中的picking就是判断点击了数字孪生可视化场景中的哪个对象。数字孪生可视化场景中模型众多,难免需要一些交互效果。例如,当点击某个模型做出反馈动作时,需要能够通过鼠标的点击位置推导出被点击的模型。这种技术实现称为拣选。数字孪生可视化场景模型多时,如何高效实现拣选作业?下面分别介绍四种方法:1.通过属性和接口拾取(Pick)对象通过平台提供的属性和接口可以获取鼠标拾取的对象。在项目文件中输入以下代码,在日志窗口中会出现输出当前选取和之前选取的数字孪生可视化对象。代码如下://每一帧判断picked对象是否发生变化app.on('update',function(){if(app.picker.isChanged()){console.clear();//log窗口输出当前选择的对象if(app.picker.objects[0]){console.log('Currentlypickedobjects'+app.picker.objects[0].name);}//打印之前选择的对象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';});//鼠标离开Object边框取消app.on(THING.EventType.MouseLeave,'.Thing',function(ev){ev.object.style.outlineColor=null;});3.AreaPick通过鼠标框选数字孪生可视化区域获取区域中的对象,可根据实际需要参考以下代码获取框选对象。//由于选框比较消耗性能,所以提前设置好选框的“候选集”,只在候选集中进行选框varthings=app.query('.Thing');app.picker.areaCandidates=东西;//开始选框当传入鼠标按下时选择选框的屏幕坐标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){returnobj;}},'customLevelPickedResultFunc');//暂停构建关卡的默认选择行为app.pauseEvent(THING.EventType.EnterLevel,'.Building',THING.EventTag.LevelPickedResultFunc);——————————————————数字孪生可视化:https://www.thingjs.com/