three中加css2d属性框展示

vue项目

一、引入文件CSS2DRenderer, CSS2DObject

import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';　

二、data中定义全局变量

divLabel:null,
labelRenderer:null,

三、methods中添加

   divRender(position) {
      this.divLabel= document.getElementById("divPop")
      this.windowPosition = this.transPosition(position);
    },
    labelRender(){
      this.labelRenderer = new CSS2DRenderer()
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
      this.labelRenderer.domElement.style.position = 'absolute';
      this.labelRenderer.domElement.style.top = 0;
      // 去掉鼠标捕捉事件
      this.labelRenderer.domElement.style.pointerEvents = "none";
      document.body.appendChild(this.labelRenderer.domElement);
    },
    transPosition(position) {
      let world_vector = new THREE.Vector3(position.x, position.y, position.z);
      let vector = world_vector.project(this.camera);
      let halfWidth = window.innerWidth / 2,
          halfHeight = window.innerHeight / 2;
      return {
          x: Math.round(vector.x * halfWidth + halfWidth),
          y: Math.round(-vector.y * halfHeight + halfHeight)
      };
    },

四、在render()方法中写入

  this.labelRenderer.render(this.scene, this.camera)

五、在resize（）方法中写入

this.labelRenderer.setSize( window.innerWidth, window.innerHeight );

六、在获取模型位置的地方加上（换成你对应的）

  let objPosition = gltf.scene.children[0].position;
   this.divRender(objPosition)
   let pointLabel = new CSS2DObject(this.divLabel)
  gltf.scene.add(pointLabel);

　　

有疑问或不懂的，请加qq学习群讨论qq:    854184700

 

标签：中加,domElement,labelRenderer,three,css2d,window,vector,let,position
来源： https://www.cnblogs.com/yaosusu/p/16299710.html