threejs之显示Label-CSS2DRenderer

在 Three.js 中，要显示 2D 文本标签可以使用 CSS2DRenderer。

CSS2DRenderer 可以将 2D 元素渲染在 Three.js 的场景中，可以使用标准 HTML 和 CSS 样式来创建标签。这允许我们非常方便地创建自定义的标签，比如显示对象名称、文字、标注等等。

下面是一个简单的使用 CSS2DRenderer 显示文本标签的示例：

// 创建 CSS2DRenderer
var renderer = new THREE.CSS2DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建文本标签
var label = document.createElement('div');
label.className = 'label';
label.textContent = 'Hello, World!';
var labelObj = new THREE.CSS2DObject(label);
labelObj.position.set(0, 0, 0);
scene.add(labelObj);

// 渲染循环
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

在上面的代码中，我们首先创建了一个 CSS2DRenderer，然后创建了场景和相机。接着，我们创建了一个 div 元素作为文本标签，设置了它的 className 和 textContent 属性，并将其包装为一个 CSS2DObject 对象，设置其位置并添加到场景中。最后，我们启动了渲染循环。

需要注意的是，CSS2DRenderer 渲染的元素是基于屏幕坐标系的，它们的位置是相对于窗口左上角的像素位置。如果需要将它们放置在 Three.js 中的某个物体上，需要通过计算其位置和旋转来实现。