Felix.Li 发表于 2024-9-29 11:34:49

3D模型快速聚焦查看

wyn的新版本在3D模型层面已经有很多新的效果展示。自然而然也伴生了很多成型的方法供大家使用,今天给大家分享一个简单的3D效果

快速聚焦查看选择模型

功能其实就是我们的模型可以支持点击,并且点击的时候,可以聚焦显示我们的点击的模型,并且只显示我们点击的模型,然后隐藏其他所有模型。先看一下效果吧:


那么接下来就来看一下怎么实现呢。
总共实现分为两步
1.实现聚焦的能力
2.实现显隐的能力

分别来说
1.显示聚焦的能力
这个其实只需要使用我们提供的配置即可:
如果我们需要聚焦的,是一整个数据图层,其实就可以直接在数据图层处设置:

这样改图层上所有绑定数据的模型,都可以直接实现聚焦,如果未绑定数据,只是单个模型的话,也可以单独设置:

我们对模型节点或者模型节点容器的点击行为做设置即可。

1.实现显隐的能力
这个就需要配合我们的一定3D场景的自定义脚本了,具体脚本实现如下(场景设定 -> 自定义脚本 -> 创建一个场景加载完成的脚本):
scene.selectModel = false;
scene.onPointerObservable.add((pointerInfo) => {
    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
      const pickResult = scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
      if (pickResult.hit) {
            scene.selectModel = true;
            scene.meshes.forEach((mesh) => {
                if (pickResult.pickedMesh.name == mesh.name) {
                  mesh.isVisible = true;
                }
                else
                  mesh.isVisible = false;
            });
      } else {
            if (scene.selectModel) {
                scene.meshes.forEach((mesh) => {
                  mesh.isVisible = true;
                });
            };
            scene.selectModel = false;
      }
    }
}, BABYLON.PointerEventTypes.POINTERDOWN);
该方法就是获取场景的点击事件,然后当我们点击到模型的时候,执行上半部分,对点击的模型做显示,其他模型做隐藏。
否则点击空白区域,就是显示所有的模型。
以上就是所有的步骤了,想实现的快试试吧
页: [1]
查看完整版本: 3D模型快速聚焦查看