threejs中选中模型，显示对应的文字标签，怎么用Css2DRenderer实现。

在Three.js中，我们可以使用Css2DRenderer来实现在选中模型时显示对应的文字标签。Css2DRenderer允许我们在3D场景中渲染2D元素，比如文字或者标签。

以下是实现的步骤：

1. 首先，创建一个新的Css2DRenderer对象，并将其与渲染器关联起来：

const css2dRenderer = new THREE.CSS2DRenderer();
css2dRenderer.setSize(window.innerWidth, window.innerHeight);
css2dRenderer.domElement.style.position = 'absolute';
css2dRenderer.domElement.style.top = 0;
document.body.appendChild(css2dRenderer.domElement);

2. 创建一个CSS2DObject对象来表示文字标签。可以使用HTML元素来创建这个对象。例如，使用一个div元素来创建一个包含文字的标签：

const label = document.createElement('div');
label.className = 'label';
label.textContent = 'Hello, World!';

3. 创建一个CSS2DObject对象，并将其位置设置为所选模型的位置：

const cssObject = new THREE.CSS2DObject(label);
cssObject.position.set(model.position.x, model.position.y, model.position.z);

4. 将CSS2DObject添加到场景中，并将其渲染到屏幕上：

scene.add(cssObject);
css2dRenderer.render(scene, camera);

5. 最后，为选中模型添加交互事件，以便在选中模型时显示标签。可以使用Raycaster来检测鼠标与模型的交互：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
  // 计算鼠标的归一化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线的位置和方向
  raycaster.setFromCamera(mouse, camera);

  // 计算射线与模型的交互
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 选中模型时显示标签
    const selectedModel = intersects[0].object;
    const cssObject = selectedModel.userData.label;
    cssObject.visible = true;
  } else {
    // 没有选中模型时隐藏所有标签
    scene.traverse((child) => {
      if (child.userData.label) {
        child.userData.label.visible = false;
      }
    });
  }

  // 渲染场景和标签
  css2dRenderer.render(scene, camera);
}

window.addEventListener('mousemove', onMouseMove, false);

记得在CSS文件中定义.label类的样式，以控制标签的外观：

.label {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px;
}

这样就可以在选中模型时显示对应的文字标签了。希望对你有帮助！