标签：中加 domElement labelRenderer three css2d window vector let position

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。