3D模型脚本分享-动态tooltip

前置小章节-点击跳转


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



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



那么我们来一步一步实现。
一:动态显示控制tooltip。
3D模型中自带一个控制tooltip的显示:

1. sceneData.enableDataLayer(toolTipName)

复制代码

所以其实我们想要这个，只需要调用这个方法即可，所以我们就需要对每个机器做不同数据图层，然后先把他的显示关闭掉:


二:动态检测位置:
那么我们就写一个监听事件，然后一直动态监听两个模型的实时位置，在小于一个阈值的时候，做事件触发即可，具体方法可以抽象为：

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.   // 计算两点在各轴方向上的距离
   
8.   let deltaX = point2.x - point1.x;
   
9.   let deltaY = point2.y - point1.y;
   
10.   let deltaZ = point2.z - point1.z;
    
11. 
    
12.   // 计算两点之间的距离
    
13.   let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
    
14.   if(distance < labelDistance){
    
15.     if(toolTipName){
    
16.       sceneData.enableDataLayer(toolTipName)
    
17.     }
    
18.     if(onRenderEnd)
    
19.       onRenderEnd();
    
20.   }else{
    
21.     sceneData.disableDataLayer(toolTipName)
    
22.   }
    
23. }
    
24. //onBeforeRenderObservable 会在场景加载后一直被执行，所以就是检测两个模型直接的控件距离，当距离小于我们给定的一个值时，执行显示给定的数据图层tooltip。
    
25. scene.onBeforeRenderObservable.add(() => {
    
26.     toolTipRender("persion_1", "印刷机", 0.7, "印刷机");
    
27. });

复制代码

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的控制，例如我们可以做动画的衔接，组合配合等都可以。赶紧试试吧。