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);
})