three.js CSS3DRenderer、CSS3DObject渲染HTML标签

在Three.js中，CSS3DRenderer可以用来渲染3D的HTML元素，但它不能直接渲染HTML标签。你需要先创建一个3D对象，然后把HTML元素作为CSS3DObject的子元素添加到场景中。

以下是一个简单的例子，展示如何使用CSS3DRenderer渲染HTML标签：

import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建HTML元素并转换为3D对象
const htmlElement = document.createElement('div');
htmlElement.style.width = '100px';
htmlElement.style.height = '100px';
htmlElement.style.background = 'red';
htmlElement.innerHTML = 'Hello, CSS3D';
const box = new CSS3DObject(htmlElement);
scene.add(box);
 
// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个Three.js场景、相机和CSS3DRenderer渲染器。然后我们创建了一个HTML div元素，并设置了它的样式和内容。接着我们使用这个HTML元素创建了一个CSS3DObject，并将它添加到Three.js的场景中。最后，我们启动了一个简单的动画循环来渲染场景。

请注意，这个例子假设你已经在你的项目中引入了Three.js和CSS3DRenderer模块。如果你是在浏览器中直接运行代码，请确保你有一个能够加载Three.js和CSS3DRenderer的环境。