threejs 加标注,咋咋都加不进去,求解?

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);报错
阅读 2.2k
1 个回答
const obj = gltf.scene.getObjectByName(arr[i] + '标注');
if (obj) {
  //tag 会标注在空对象 obj 对应的位置
  obj.add(tag);

  tag.scale.set(0.1, 0.1, 1); //适当缩放模型标签
  tag.position.y = 40 / 2 * 0.1; //标签底部箭头和空对象标注点重合:偏移高度像素值一半*缩放比例
} else {
  console.warn('没找到 ' + arr[i] + '标注' + ' 的对象');
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题