ThreeJS教程:标签位置(标注工厂设备)

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

标签位置(标注工厂设备)

下面以一个工厂设备模型的标注为例,给大家演示工厂设备标签的位置如何设置。

回顾:CSS2模型对象继承父对象位置

在上节课“圆锥标注案例中”给大家说过,HTML标签对应的CSS2模型对象,如果作为一个模型的子对象,默认标注在模型的局部坐标系原点位置。

const tag = new CSS2DObject(div);
//标签tag作为obj子对象,默认标注在obj的局部坐标系坐标原点
obj.add(tag);

模型软件中工厂设备局部坐标系

一个模型本身是有尺寸的,你想把模型标签标在模型那个具体位置,可以在三维软件中,把该模型的局部坐标系坐标原点设置在哪里。

本节课课件中提供的gltf工厂模型,有两个相同的形状的设备,名字分别为设备A和设备B,为了给大家演示标签功能,设备A和设备B的局部坐标系相对自身位置不同,下面分别进行标注。

你可以先尝试利用前面学习过的知识,获取某个模型设备进行标注,然后在跟着视频学习。

threejs获取工厂设备,查看局部坐标系

loader.load("../工厂.glb", function (gltf) {
    const obj = gltf.scene.getObjectByName('设备A');
})

const obj = gltf.scene.getObjectByName('设备B');
// 可视化工厂设备obj的局部坐标系
const axesHelper = new THREE.AxesHelper(30);
obj.add(axesHelper);

CSS2模型对象标注工厂设备

标签tag作为obj子对象,默认标注在工厂设备obj的局部坐标系坐标原点

loader.load("../工厂.glb", function (gltf) {
    const tag = new CSS2DObject(div);
    // const obj = gltf.scene.getObjectByName('设备A');
    const obj = gltf.scene.getObjectByName('设备B');
    //标签tag作为obj子对象,默认标注在工厂设备obj的局部坐标系坐标原点
    obj.add(tag);
})

建模软件创建空对象(控制标签位置)

除了上面调整局部坐标系方式,还有一种更灵活,更方便的标注方式,就是在你的三维建模软件中,任何你想标注的位置,创建一个空对象(空的模型对象,没有任何模型顶点数据,只是一个空对象)。

不同三维建模软件中,创建空对象方式不同,不过思路是相同。

loader.load("../工厂.glb", function (gltf) {
    const tag = new CSS2DObject(div);
    // obj是建模软件中创建的一个空对象
    const obj = gltf.scene.getObjectByName('设备B标注');
    // const obj = gltf.scene.getObjectByName('停车场标注');
    //tag会标注在空对象obj对应的位置
    obj.add(tag);
})


上一篇:ThreeJS教程:标签位置不同设置方式 (mvrlink.com)

下一篇:ThreeJS教程:标签指示线或箭头指向标注点 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号