请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Felix.Li Wyn认证

超级版主

107

主题

2896

帖子

5483

积分

超级版主

Rank: 8Rank: 8

积分
5483

Wyn高级认证Wyn认证

Felix.Li Wyn认证
超级版主   /  发表于:2024-11-20 15:26  /   查看:115  /  回复:0
本帖最后由 lucas.Yan 于 2024-12-2 12:28 编辑

前置小章节-点击跳转


数据标签是帮助我们获取数据信息最快速的方法,但是在3D场景里面,如果一直漂浮着一个标签,也会比较影响我们的观感,所以我们经常想要实现的是点击到某个节点,或者hover过某个节点的时候,才提示这些信息,但是这个都是我们有人为操作的时候才会出来。
假如果我们做了一个巡检的场景。那想实现在巡检的过程中,我走到哪里,哪里的信息提示就出来。这种应该如何实现呢,今天就给大家做一个这种样式的分享:
动态tooltip.gif


那么首先,我们需要一个巡检移动的模型,可以任意一个。
其次我们梳理一下逻辑。动态tooltip的显示无非就是分为两点:
第一点就是如何动态控制tooltip。
第二点就是我们得计算出两个模型的位置。当两个模型接近到某一个位置的时候,就开始显示tooltip。



那么我们来一步一步实现。
一:动态显示控制tooltip。
3D模型中自带一个控制tooltip的显示:
  1. sceneData.enableDataLayer(toolTipName)
复制代码
所以其实我们想要这个,只需要调用这个方法即可,所以我们就需要对每个机器做不同数据图层,然后先把他的显示关闭掉:
image.png33746947.png

二:动态检测位置:
那么我们就写一个监听事件,然后一直动态监听两个模型的实时位置,在小于一个阈值的时候,做事件触发即可,具体方法可以抽象为:
  1. function toolTipRender(moveModelName, tooltipModelName, labelDistance, toolTipName, onRenderEnd) {
  2.   var model = scene.getMeshByName(moveModelName);
  3.   var tooltipModel = scene.getMeshByName(tooltipModelName);
  4.   let point1 = { x: model.position.x, y: model.position.y, z: model.position.z };
  5.   let point2 = { x: tooltipModel.position.x, y: tooltipModel.position.y, z: tooltipModel.position.z };

  6.   // 计算两点在各轴方向上的距离
  7.   let deltaX = point2.x - point1.x;
  8.   let deltaY = point2.y - point1.y;
  9.   let deltaZ = point2.z - point1.z;

  10.   // 计算两点之间的距离
  11.   let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
  12.   if(distance < labelDistance){
  13.     if(toolTipName){
  14.       sceneData.enableDataLayer(toolTipName)
  15.     }
  16.     if(onRenderEnd)
  17.       onRenderEnd();
  18.   }else{
  19.     sceneData.disableDataLayer(toolTipName)
  20.   }
  21. }
  22. //onBeforeRenderObservable 会在场景加载后一直被执行,所以就是检测两个模型直接的控件距离,当距离小于我们给定的一个值时,执行显示给定的数据图层tooltip。
  23. scene.onBeforeRenderObservable.add(() => {
  24.     toolTipRender("persion_1", "印刷机", 0.7, "印刷机");
  25. });
复制代码
toolTipRender就是计算两个模型的位置坐标,并动态判断tooltip的显示。

scene.onBeforeRenderObservable.add 就是添加监听事件。而我们抽象的方法就是传入移动的模型节点名称,tooltip对应的模型节点名称,两个模型的距离以及数据图层名称。最后有个回调,其实可以自己看需不需要即可。
假如我们有多个机器,就多次调用并且添加多个数据图层即可:
  1. scene.onBeforeRenderObservable.add(() => {
  2.           toolTipRender("persion_1", "印刷机", 0.7, "印刷机");
  3.           toolTipRender("persion_1", "镭刻机", 0.7, "镭刻机");
  4.           toolTipRender("persion_1", "SPI", 0.7, "SPI");
  5. });
复制代码
至此即可实现动态巡检的数据标签动态显示了。

最后其实我们也可以看出来,这个本身虽然是tooltip的显示,但是实际上我们稍加修改一下,就可以做到动态监控,然后动态执行自己的方法,不限于tooltip的控制,例如我们可以做动画的衔接,组合配合等都可以。赶紧试试吧。


系列链接:
【易学技巧】3D模型基本小技巧
【易学技巧】3D模型脚本分享-动态显示/隐藏tooltip
【易学技巧】3D模型脚本分享-相机跟随模型移动
【易学技巧】3D模型脚本分享-动态显示/隐藏指定节点

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部