three.js如何实现简易3D机房？显示信息弹框/标签

在Three.js中，可以使用THREE.CSS2DRenderer来渲染DOM元素，以便它们始终面向相机，这样就可以在3D场景中显示2D标签或弹框。以下是实现这一功能的代码示例：

// 创建CSS2DRenderer
const labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
 
// 创建一个3D标签
function create3DLabel(text, position) {
  const labelDiv = document.createElement('div');
  labelDiv.style.color = 'white';
  labelDiv.style.background = 'rgba(0, 0, 0, 0.5)';
  labelDiv.style.border = '1px solid #ffffff';
  labelDiv.style.padding = '5px';
  labelDiv.style.borderRadius = '5px';
  labelDiv.textContent = text;
  
  const labelObj = new THREE.CSS2DObject(labelDiv);
  labelObj.position.copy(position);
  scene.add(labelObj);
  
  return labelObj;
}
 
// 使用函数创建标签并添加到场景中
const label = create3DLabel('机房信息', new THREE.Vector3(0, 10, 0));
 
// 在渲染循环中更新标签
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}
 
// 调用渲染函数
render();

在这个例子中，我们首先创建了一个CSS2DRenderer并将其DOM元素附加到页面的body上。然后定义了一个函数create3DLabel，该函数接受文本和位置作为参数，创建一个DOM元素并将其转换为THREE.CSS2DObject，最后将其添加到3D场景中。

在渲染循环中，我们调用labelRenderer.render来确保2D DOM元素始终面向相机。这样就可以在3D场景中显示漂亮的2D标签了。