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

最新推荐文章于 2023-02-09 17:06:49 发布

原创

最新推荐文章于 2023-02-09 17:06:49 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #javascript #java #css #html5

本文介绍了在数字孪生可视化场景中实现物体选择的三种方法：1) 使用 Selection 模块接口；2) 通过属性和方法侦测选择集变化；3) 利用事件监听选择集变化。并提供了颜色区分法作为实现交互的示例。

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