THREE.JS 使用CSS2DRenderer/CSS3DRenderer 给模型增加标签

在Three.js中，可以使用CSS2DRenderer或CSS3DRenderer来将2D或3D内容与3D场景中的模型相关联。以下是一个简单的例子，展示如何将标签与3D模型结合使用：

import * as THREE from 'three';
import { CSS2DRenderer, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 设置场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 加载3D模型（以GLTF为例）
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
    scene.add(gltf.scene);
    // 假设我们使用的是第一个模型
    const model = gltf.scene.children[0];
 
    // 创建标签元素
    const label = document.createElement('div');
    label.style.color = 'white';
    label.style.padding = '4px';
    label.style.background = 'black';
    label.textContent = '这是一个标签';
    document.body.appendChild(label);
 
    // 将标签与模型相关联
    new CSS2DRenderer().setSize(window.innerWidth, window.innerHeight);
    // 如果使用CSS3DRenderer，需要将标签作为3D元素处理
    // new CSS3DRenderer().setSize(window.innerWidth, window.innerHeight);
    const labelObject = new THREE.CSS2DObject(label);
    // 如果使用CSS3DRenderer，需要将labelObject添加到scene中
    // scene.add(labelObject);
 
    // 将标签的位置与模型的位置对齐
    labelObject.position.copy(model.position);
    scene.add(labelObject);
});
 
camera.position.z = 5;
 
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    // 如果使用CSS3DRenderer，调用render方法
    // cssRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先设置了Three.js的场景、摄像机和渲染器。然后，我们加载了一个3D模型，并在模型加载完成后创建了一个HTML标签。接着，我们创建了一个CSS2DRenderer实例，并将这个标签作为2D对象添加到了场景中。最后，我们调整了标签的位置，使其与3D模型的位置对齐，并启动了动画循环。

注意：在实际应用中，你需要根据模型的实际情况调整标签的对齐方式，以确保标签始终面向摄像机，并且不会随着模型的旋转而旋转。