1,介绍
使用threejs实现标签显示,这里只介绍如何实现显示标签功能,其他可查看往期文章。
效果图如下:
2,主要说明
实现标签使用CSS2DRenderer(2D渲染器) 进行渲染。
1,引入渲染器并初始化
2,创建dom元素对象,添加显示的内容和样式
3,把dom元素包装到CSS2DObject对象,并添加到场景中
4,使用CSS2DRenderer进行渲染显示
引入渲染器,并初始化
<script type="text/javascript" src="libs/CSS2DRenderer.js"></script> var 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);
创建标签,并添加到场景中
// 新建标签 function createLableObj(text, vector) { let laberDiv = document.createElement('div');//创建div容器 laberDiv.className = 'laber_name'; laberDiv.textContent = text + '\n' + "余量:123"; let pointLabel = new THREE.CSS2DObject(laberDiv); pointLabel.position.set(vector.x, vector.y, vector.z); return pointLabel; } let pointLabel = createLableObj(text, vector); scene.add(pointLabel);
进行渲染
labelRenderer.render(scene, camera);
3,源码和模型
需要完整代码、模型或者其他源码,请进入博客首页查看其他文章或者留言