一、问题描述：
three.js中使用Sprite标签和3d标签进行物体标注时发现标签的实际位置与position值没有对应起来，而是发生了等比例的偏移。如下图：
标签的position与三角锥的值一样，但是位置发生了偏移。
二、解决：
给标签的position添加一个缩放，label.position.multiplyScalar(0.65);完整代码如下：
// // 创建一个3dSprite标签
function tag3DSprite(name: string, position: THREE.Vector3) {
// 创建div元素(作为标签)
const div = document.createElement('div');
div.innerHTML = name;
div.classList.add('tag');
//div元素包装为CSS3模型对象CSS3DSprite
const label = new CSS3DSprite(div);
div.style.pointerEvents = 'none'; //避免HTML标签遮挡三维场景的鼠标事件
//缩放CSS3DSprite模型对象
label.scale.set(0.65, 0.65, 0.65); //根据相机渲染范围控制HTML 3D标签尺寸
label.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度
const geometryHelper = new THREE.ConeGeometry(8, 20, 3);
geometryHelper.translate(0, -20, 0);
geometryHelper.rotateX(Math.PI + 0.2);
const helper = new THREE.Mesh(
geometryHelper,
new THREE.MeshNormalMaterial({
transparent: false, // 不透明的渲染对象在透明的对象前渲染
depthWrite: false,
depthTest: false, // 渲染时不会关心物体的前后，会进行混合， 减少重叠检查，节省性能。
}),
);
const group = new THREE.Group();
label.position.set(position.x, position.y + 60, position.z);
label.position.multiplyScalar(0.65);
helper.position.set(position.x, position.y, position.z);
group.add(label); //标签插入场景
group.add(helper);
return group; //返回CSS3模型标签
}
完成效果如下：
