Threejs实现场景标签

大概是这个样子的

1、导入CSS2DRenderer或CSS3DRenderer，这里我就以CSS3DRenderer为例。

import { CSS3DRenderer, CSS3DObject } from './example/jsm/renderers/CSS3DRenderer.js';

2、创建CSS3DRenderer

    let css3Renderer;//定义为全局变量
    css3Renderer = new CSS3DRenderer();
	css3Renderer.setSize(window.innerWidth, window.innerHeight);
	css3Renderer.domElement.style.position = 'absolute';
	css3Renderer.domElement.style.top = 0;
    //设置.pointerEvents=none，解决HTML 元素标签对threejs canvas画布鼠标事件的遮挡
    css3Renderer.domElement.style.pointerEvents = 'none';
	document.body.appendChild(css3Renderer.domElement);

3、创建标签以及标签样式

    //创建标签
	const laberDiv = document.createElement('div');
	laberDiv.className = 'laber_name';
	laberDiv.textContent = "标签内容" + '\n' + "余量：123";
	laberDiv.style.padding = '0px 4px';
	laberDiv.style.height ='15px';
	laberDiv.style.width = '25px';
	laberDiv.style.fontSize = '5px'; // 设置文字大小
    laberDiv.style.color = '#efeff3'; // 设置文字颜色
	laberDiv.style.border ='solid 1px rgba(5, 246, 246, 0.5)';
	laberDiv.style.boxShadow = 'inset 0 0 10px rgba(7,118,181,.4)';
	laberDiv.style.borderRadius = '15px';
	laberDiv.style.position = 'relative'; // 设置相对定位，使 ::before 可以相对于其定位
    //laberDiv.style.overflow = 'hidden'; // 隐藏 ::before 超出的部分
	const tag = new CSS3DObject(laberDiv);
	//tag.rotation.x = Math.PI;
	tag.position.set(0, 170, 0);
	scene.add(tag);
	tag.visible = true; // false设置为标签不可见

4、这是css的箭头样式

.laber_name::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: solid transparent;
  border-width: 5px;
  border-top-color: #00ffff; /* 箭头颜色 */
  border-top-color: rgba(0, 255, 255, 0.5); /* 50% 透明的箭头颜色 */
  transform: translateX(-50%);
}

5、最后记得渲染一下

css3Renderer.render(scene, camera);