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

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

回顾：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);
})