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

从零开始学习3D可视化对象选择

时间:2023-04-05 15:50:03 HTML5

1.选择对象2.通过属性和方法检测选择集变化3.通过事件检测检测选择集变化在构建了数字孪生可视化场景之后,我们应该如何交互?其中最关键的是如何实现对象的选择。比如鼠标点击后,判断是否选中了某个模型或者模型的某个部分。当鼠标悬停在数字孪生可视化场景中的某个对象上时,并不意味着该对象已被选中。需要点击它来表示它被选中。1.选择对象数字孪生可视化场景中的对象选择可以通过Selection模块实现,该功能可以通过app.selection接口实现。选择集是封装在抽象选择中的DOM元素的有序集合。一般情况下,初始选择集实例是通过调用全局数字孪生可视化对象的选择集方法获得的。然后,您可以调用Selection实例的内置方法来创建其子集。看下面的例子://将对象添加到选择集中app.selection.select(obj);//判断对象是否在选择集中app.selection.has(obj);//从中删除对象选择集app.selection。deselect(obj);//清空选择集app.selection.clear();2.通过属性和方法检测选择集变化平台提供的属性和方法可以检测选择集变化。Selection通过提供isChanged方法获取选择集的变化,通过objects和previousObjects获取当前选择集和变化前的选择集。if(app.selection.isChanged()){//获取当前选中了哪些对象console.log(app.selection.objects);//当isChanged时,那些对象是之前选中的console.log(app.selection.previousObjects);}3.通过事件检测选择集变化也可以通过事件检测选择集变化,利用Select和Deselect事件精确控制数字孪生视觉对象对选择的响应,如下:.color="#ff0000";});app.on(THING.EventType.Deselect,'.Thing',function(ev){//当对象从选择集中删除时,清除颜色ev.object.样式.color=null;});您还可以通过SelectionChange事件通知数字孪生更新视觉对象选择集。app.on(THING.EventType.SelectionChange,function(ev){console.log(ev.previousObjects+""+ev.objects);});我的实现是颜色区分法:当鼠标按下时,对象重绘为红色,会改变选中对象的颜色;取消选择对象时,颜色将被取消。具体代码如下:varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});app.on('load',function(){//从场景中选择一个对象varobj=app.query('car01')[0];THING.widget.Button('选择指定对象',function(){//选择对象app.selection.select(obj);});THING.widget.Button('Deselectobject',function(){//取消选择对象app.selection.deselect(obj);});});app.on(THING.EventType.Select,'.Thing',function(ev){//改变选中对象的颜色ev.object.style.color="#ff0000";});app.on(THING.EventType.Deselect,'.Thing',function(ev){//当对象取消选中时,取消颜色ev.object.style.color=null;});————————————————————数字孪生可视化:https://www.thingjs.com/