3D模型脚本分享-动态显示/隐藏Tooltip

收藏

本帖最后由 lucas.Yan 于 2024-12-2 12:28 编辑

前置小章节-点击跳转

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

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

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

sceneData.enableDataLayer(toolTipName)

复制代码

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

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

function toolTipRender(moveModelName, tooltipModelName, labelDistance, toolTipName, onRenderEnd) {
var model = scene.getMeshByName(moveModelName);
var tooltipModel = scene.getMeshByName(tooltipModelName);
let point1 = { x: model.position.x, y: model.position.y, z: model.position.z };
let point2 = { x: tooltipModel.position.x, y: tooltipModel.position.y, z: tooltipModel.position.z };
// 计算两点在各轴方向上的距离
let deltaX = point2.x - point1.x;
let deltaY = point2.y - point1.y;
let deltaZ = point2.z - point1.z;
// 计算两点之间的距离
let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
if(distance < labelDistance){
if(toolTipName){
sceneData.enableDataLayer(toolTipName)
}
if(onRenderEnd)
onRenderEnd();
}else{
sceneData.disableDataLayer(toolTipName)
}
}
//onBeforeRenderObservable 会在场景加载后一直被执行，所以就是检测两个模型直接的控件距离，当距离小于我们给定的一个值时，执行显示给定的数据图层tooltip。
scene.onBeforeRenderObservable.add(() => {
toolTipRender("persion_1", "印刷机", 0.7, "印刷机");
});

复制代码

toolTipRender就是计算两个模型的位置坐标，并动态判断tooltip的显示。
而
scene.onBeforeRenderObservable.add 就是添加监听事件。而我们抽象的方法就是传入移动的模型节点名称，tooltip对应的模型节点名称，两个模型的距离以及数据图层名称。最后有个回调，其实可以自己看需不需要即可。
假如我们有多个机器，就多次调用并且添加多个数据图层即可:

scene.onBeforeRenderObservable.add(() => {
toolTipRender("persion_1", "印刷机", 0.7, "印刷机");
toolTipRender("persion_1", "镭刻机", 0.7, "镭刻机");
toolTipRender("persion_1", "SPI", 0.7, "SPI");
});

复制代码

至此即可实现动态巡检的数据标签动态显示了。

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

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

		自动登录	找回密码
密码			立即注册

3D模型脚本分享-动态显示/隐藏Tooltip

0 个回复

Wyn高级认证

Wyn认证