three3d.js

      // 城市 - 数据显示
      setCityNum(vector, num, data) {
        // CSS2DRenderer生成的标签直接就是挂在真实的DOM上，并非是Vue的虚拟DOM上
                const div = document.createElement('div');
                div.className = 'city-num-label';
                div.textContent = data.total;
 
                const contentDiv = document.createElement('div');
                contentDiv.className = 'city-num-label-content';
                contentDiv.innerHTML = 
          '本区县共有窑炉企业 ' + data.total + ' 个。<br/>' +
          '介绍：' + data.brief
        ;
        div.appendChild(contentDiv);
 
                const label = new CSS2DObject(div);
                label.position.set(vector.x, vector.y, num + 0.5);
        label.visible = true;
        this.cityNumMeshArr.push(label);
        this.groupOne.add(label);
        // this.scene.add(spritey);
     }

 

使用threejs实现标签显示，这里只介绍如何实现显示标签功能

参考链接： https://blog.csdn.net/baidu_29701003/article/details/119420267

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);