three.js中添加html跟随模型移动

最新推荐文章于 2024-02-02 14:03:43 发布

小傻瓜fei

最新推荐文章于 2024-02-02 14:03:43 发布

阅读量755

点赞数

分类专栏： three.js 文章标签： html vue.js cocos2d 贴图

本文链接：https://blog.csdn.net/qq_35973440/article/details/130100918

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用CSS2DRenderer+CSS2DObject

//先引入
	import {
		CSS2DRenderer,
		CSS2DObject,
	} from "three/examples/jsm/renderers/CSS2DRenderer.js";

//再创建 

		var cont = document.getElementById('box');//放three场景的div
		
		var labelRenderer = new CSS2DRenderer(); //使用HTML渲染器
		    labelRenderer.setSize(window.innerWidth, window.innerHeight);
			cont.appendChild(labelRenderer.domElement)
			labelRenderer.domElement.style.position = 'fixed';
			labelRenderer.domElement.style.top = '0px';
			labelRenderer.domElement.style.left = '0px';
			labelRenderer.domElement.style.zIndex = '0';//设置层级

//如果使用了轨道OrbitControls  那么就要换成labelRenderer.domElement 否则轨道会失效
//controls = new OrbitControls(camera, renderer.domElement);
  controls =new OrbitControls(camera, labelRenderer.domElement);

//然后再创建html  添加到场景中
    const chinaDiv = document.createElement('div');
				chinaDiv.className = "pop-box";
				chinaDiv.innerHTML = `
					<div class="monitor_tips_content">
                    <div class=""><span>编号：WD-001</span></div>
                    <div class=""><span>类型：温度</span></div>
                    <div class=""><span>位置：桥梁缝隙</span></div>
                    </div>  `;
				var chinaLabel = new CSS2DObject(chinaDiv);
				chinaLabel.position.set(-66.34389224464286,13.52034541273466,4.487919201971682);//三维位置xyz
                scene.add(chinaLabel)


//最后再添加labelRenderer.render(scene, camera);到 animate中
    function animate() {
					requestAnimationFrame(animate);
					controls.update();
					renderer.render(scene, camera);
					labelRenderer.render(scene, camera);
				}
				animate();