threejs CSS3DRenderer添加标签并设置朝向摄像机

在Three.js中，要使用CSS3DRenderer添加HTML标签并让它面向摄像机，你需要创建一个CSS3DObject对象，并将其添加到CSS3DRenderer的场景中。然后，你可以通过设置3D对象的rotation来让它面向摄像机。

以下是一个简单的例子，展示如何添加一个带有文本的HTML标签，并将其旋转以面向摄像机：

// 创建一个Three.js场景和摄像机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个HTML元素并将其转换为3D对象
const label = document.createElement('div');
label.style.width = '100px';
label.style.height = '50px';
label.style.background = 'red';
label.innerHTML = 'Hello, World!';
const labelObject = new THREE.CSS3DObject(label);
labelObject.position.set(0, 0, 0); // 设置位置
scene.add(labelObject);
 
// 更新标签的旋转以面向摄像机
function updateLabelRotation() {
  const vector = new THREE.Vector3(0, 0, -1);
  vector.applyEuler(camera.rotation);
  labelObject.lookAt(vector.add(camera.position));
}
 
// 监听旋转事件，并更新标签的旋转
camera.addEventListener('change', updateLabelRotation);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在这个例子中，CSS3DObject是用来创建可以和3D场景中的其他对象互动的HTML元素。CSS3DRenderer用于渲染这些HTML元素。updateLabelRotation 函数计算出摄像机的朝向，并设置3D对象的朝向，使其始终面向摄像机。然后，你可以将这个函数绑定到摄像机的事件监听器上，以确保标签始终正确地反应朝向。