three中加css2d属性框展示

 

three中加css2d属性框展示

vue项目

一、引入文件CSS2DRenderer, CSS2DObject

?

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

二、data中定义全局变量

?

1 2	divLabel:null, labelRenderer:null,

三、methods中添加

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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()方法中写入

?

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

五、在resize（）方法中写入

?

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

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

?

1 2 3 4

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

　　

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