threejs CSS2DRenderer(HTML元素作为标签)

CSS2DRenderer 是 Three.js 中用于将 HTML 元素作为标签附加到 3D 场景中的对象的一个工具。要使用 CSS2DRenderer 并将 HTML 元素作为标签，你需要首先创建一个 Three.js 场景，然后创建 CSS2DRenderer 实例并将其附加到Three.js 的场景中。

以下是一个简单的例子，展示如何使用 CSS2DRenderer 在 Three.js 场景中添加 HTML 元素作为标签：

import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 创建一个Three.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);
 
// 创建CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
 
// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建HTML元素作为标签
const label = document.createElement('div');
label.style.color = 'red';
label.innerHTML = 'Hello, label!';
 
// 创建CSS2DObject
const labelObject = new CSS2DObject(label);
labelObject.position.set(0, 0, 0); // 设置标签位置
scene.add(labelObject);
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个立方体，并且为它创建了一个 HTML 元素作为标签。然后，我们将这个标签作为 CSS2DObject 添加到了 Three.js 的场景中。最后，在动画循环中，我们分别使用 WebGLRenderer 和 CSS2DRenderer 来渲染场景。

这个例子提供了一个基本框架，你可以在其中添加更多的功能，比如对标签位置和样式的调整，或者添加更多的交互功能。