1.1创建渲染器(写在创建控制室OrbitControls之后)
const labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
this.labelRenderer=labelRenderer
1.2.和页面上的弹窗div进行绑定
this.testDiv = document.getElementById('testDiv');
this.moonLabel = new THREE.CSS2DObject( testDiv );
this.scene.add(this.moonLabel)
2.点击时显示弹窗并设置位置
this.testDiv.style.opacity=1
this.moonLabel.position.set( 0, 1, 0 );
3.关闭弹窗
this.testDiv.style.opacity=0
4.销毁弹窗
document.body.removeChild(this.labelRenderer.domElement);
5.在animate中写上
function animate() {
if(this.labelRenderer){
this.labelRenderer.render(this.scene,this.camera)
}
注意,这里只写了标签跟随相关的,其他相机有关自己加进去
};
也可以单独引入CSS2DRenderer
import { CSS2DObject,CSS2DRenderer } from ‘three/examples/jsm/renderers/CSS2DRenderer’;
three.js标签跟随
最新推荐文章于 2024-06-04 17:31:45 发布