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，源码和模型

需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言