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，源码和模型
需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言
