loader.load( '/public/lu/a.gltf', ( gltf ) => {
this.initLight();
let xyzTag = 0;
const xyz = [];
gltf.scene.traverse( ( child ) => {
if ( child.isMesh ) {
}
});
this.calcMeshCenter(gltf.scene);
scene.add( gltf.scene );
this.initCamera();
this.initWebGLRenderer();
this.initCss3dRender();
....
//需要批量标注的标签数据arr
const arr = ['设备A','设备B','停车场'];
for (let i = 0; i < arr.length; i++) {
// 注意是多个标签,需要克隆复制一份
const div = document.getElementById('tag').cloneNode();
div.innerHTML = arr[i];//标签数据填写
// HTML元素转化为threejs的CSS3对象
// const tag = new CSS3DObject(div);
const tag = new CSS3DObject(div);
div.style.pointerEvents = 'none'; //避免标签遮挡canvas鼠标事件
// obj是建模软件中创建的一个空对象
const obj = gltf.scene.getObjectByName(arr[i]+'标注');
//tag会标注在空对象obj对应的位置
obj.add(tag);
tag.scale.set(0.1,0.1,1);//适当缩放模型标签
tag.position.y = 40/2*0.1;//标签底部箭头和空对象标注点重合:偏移高度像素值一半*缩放比例
}
})
initCss3dRender() {
// 创建一个CSS3渲染器CSS3DRenderer
this.css3Renderer = new CSS3DRenderer();
this.css3Renderer.setSize(this.scene_W, this.scene_H);
// HTML标签<div id="tag"></div>外面父元素叠加到canvas画布上且重合
this.css3Renderer.domElement.style.position = 'absolute';
this.css3Renderer.domElement.style.top = '0px';
//设置.pointerEvents=none,解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
this.css3Renderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(this.css3Renderer.domElement);
},
报错:
obj.add(tag);报错