在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场景中的多个对象。