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，源码和模型
需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言
在线预览：左本的博客 (zuoben.top)
