ThreeJS教程：CSS3批量标注多个标签

在Three.js中，我们可以使用CSS3DObject和CSS3DRenderer来将CSS样式的元素批量标注到3D场景中的多个标签上。以下是一个简单的例子，展示如何实现这一功能：

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);
 
// 创建CSS3DObject并加入到场景中
function addCSSObject(text, x, y, z) {
  const element = document.createElement('div');
  element.textContent = text;
  element.style.cssText = `
    position: absolute;
    width: 50px;
    height: 50px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    line-height: 50px;
  `;
  
  const object = new CSS3DObject(element);
  object.position.set(x, y, z);
  scene.add(object);
  
  return object;
}
 
// 批量添加标签
const labels = ['A', 'B', 'C', 'D', 'E'].map((text, index) => {
  const x = 50 * (index - 2);
  const y = 50 * (index - 2);
  const z = 0;
  return addCSSObject(text, x, y, z);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个addCSSObject函数，它接受文本和位置参数，创建一个div元素，并将其转换为CSS3DObject。然后我们用一个map函数批量创建了五个标签，并将它们添加到场景中。最后，我们进入了一个简单的渲染循环。这个代码片段可以作为一个起点，用于将CSS样式的标签应用于Three.js场景中的多个对象。