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