three.js标签跟随

最新推荐文章于 2024-03-06 10:21:59 发布

梦幻空花~

最新推荐文章于 2024-03-06 10:21:59 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_38868959/article/details/125072030

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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’;