推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

标签位置不同设置方式

前面给大家讲解过，你想把HTML元素标签标注在三维场景中哪个位置，可以设置HTML标签对应的CSS2模型对象CSS2DObject位置属性.position。

CSS2模型标签对象位置和要标注的Mesh放在同一个位置，这样HTML标签就可以标注Mesh。

mesh.position.set(50,0,50);

// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);
tag.position.set(50,0,50);

group.add(mesh,tag);

在学习本节课之前，最好把章节4关于层级模型知识的讲解回顾一下。

mesh增加一个父对象,查看标签变化

mesh增加一个父对象,且设置父对象的位置坐标，然后查看标签变化。

mesh.position.set(50,0,50);
// mesh设置一个父对象meshGroup
const meshGroup = new THREE.Group();
meshGroup.add(mesh);
// mesh位置受到父对象局部坐标.positionn影响
meshGroup.position.x = -100;

如果需要的mesh有多个父对象，且都有自己的位置属性.position，设置mesh标签对象位置CSS2DObject.position的时候，就需要考虑mesh父对象的位置对mesh的影响。

// tag.position.set(50,0,50);
tag.position.set(-50,0,50);

.getWorldPosition()方法计算世界坐标

前面4.3节. 本地坐标和世界坐标 (opens new window)内容讲解过，通过.getWorldPosition()方法可以获取一个模型的世界坐标。

mesh.position.set(50,0,50);
// mesh设置一个父对象meshGroup
const meshGroup = new THREE.Group();
meshGroup.add(mesh);
// mesh位置受到父对象局部坐标.positionn影响
meshGroup.position.x = -100;

const tag = new CSS2DObject(div);
const worldPosition = new THREE.Vector3();
// 获取mesh的世界坐标(meshGroup.position和mesh.position累加结果)
mesh.getWorldPosition(worldPosition);
// mesh世界坐标复制给tag
tag.position.copy(worldPosition);

const group = new THREE.Group();
// 最后meshGroup和tag放在同一个父对象中即可
group.add(meshGroup,tag);

CSS2模型对象作为Mesh子对象

无论mesh有多少个父对象，CSS2模型对象作为Mesh子对象,可以直接继承mesh的世界坐标，相比通过.getWorldPosition()方法获取世界坐标，再设置标签模型位置CSS2DObject.position更方便。

// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);
//标签tag作为mesh子对象，默认受到父对象位置影响
mesh.add(tag);

标注模型几何体的某个顶点

标签模型对象作为需要标注mesh的子对象，然后获取mesh几何体某个顶点的坐标，作为标签模型对象局部坐标.position。

// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);
//标签tag作为mesh子对象，默认受到父对象位置影响
mesh.add(tag);

const pos = geometry.attributes.position;
// 获取几何体顶点1的xyz坐标，设置标签局部坐标.position属性
tag.position.set(pos.getX(0),pos.getY(0),pos.getZ(0));

标注圆锥顶部(了解局部坐标系原点)

圆锥几何体局部坐标系默认位于自己高度一半位置。

const geometry = new THREE.ConeGeometry(25, 80);
const mesh = new THREE.Mesh(geometry, material);
// 可视化模型的局部坐标系
const axesHelper = new THREE.AxesHelper(100);
mesh.add(axesHelper);

一个模型对象，不管是一个mesh，还是多个mesh组成的模型，本身是有尺寸的，如果你把标签模型对象CSS2DObject作为该模型对象的子元素，标签默认是标注在模型的局部坐标系坐标原点。

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);
//标签tag作为mesh子对象，默认受到父对象位置影响
mesh.add(tag);

平移改变圆锥几何体顶点坐标，圆锥mesh的局部坐标系相对自身发生改变，位于圆锥底部，标签想标注在顶部，除了标签作为圆锥mesh子对象，还需要向上平移圆锥Mesh的高度尺寸。

//y轴正方向，平移高度一半
geometry.translate(0, 40, 0); 
//圆锥mesh局部坐标系原点在自己底部时候，标签需要向上偏移圆锥自身高度
tag.position.y += 80; 

沿着y方向平移-40，改变圆锥几何体顶点坐标，圆锥mesh的局部坐标系坐标原点此刻位于圆锥顶部，这样标签刚好标注在顶部。

//y轴负方向，平移高度一半，标签刚好标注在顶部
geometry.translate(0,-40,0);

上一篇：ThreeJS教程：Canvas尺寸变化(HTML标签) (mvrlink.com)

下一篇：ThreeJS教程：标签位置(标注工厂设备) (mvrlink.com)