乐趣区

关于javascript:从零开始学习3D可视化之物体选择

jiezi

1、抉择物体
2、通过属性和办法，侦测抉择集变动
3、通过事件侦测抉择集变动
搭建好数字孪生可视化场景后，应该如何进行交互？这其中最要害的就是如何实现 物体的抉择。比方鼠标点击后判断是否选中了某个模型或模型的某个局部。在数字孪生可视化场景中鼠标悬停到物体上，并不代表曾经抉择了这个物体，须要点击后才示意抉择了它。

1、抉择物体

抉择数字孪生可视化场景中的物体，能够通过 Selection 模块实现，通过 app.selection 的接口实现该性能。抉择集是被封装到形象 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 事件准确控制数字孪生可视化物体针对抉择的响应，如下例：

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;
});

还能够通过 SelectionChange 事件告诉数字孪生可视化物体抉择汇合更新。

app.on(THING.EventType.SelectionChange, function (ev) {console.log(ev.previousObjects+" "+ev.objects);
});

我的实现计划是色彩区分法：鼠标按下时物体重绘为红色将选中的物体色彩进行扭转；勾销物体选中时色彩勾销扭转。

具体代码如下：

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'});
 
 app.on('load', function () {
 // 从场景中抉择一个物体
 var obj = app.query('car01')[0];
 THING.widget.Button('选中指定物体', function () {
 // 选中物体
 app.selection.select(obj);
 
 });
 THING.widget.Button('勾销选中物体', 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/

退出移动版