如何使Three.js的CSS2DObject始终固定在相机右上角？

你不需要再依赖CSS2DObject实现固定在屏幕角落的信息面板——这类组件的设计初衷是让HTML元素跟随3D对象，并不适合做固定UI。直接用常规HTML+CSS就能完美解决问题，而且逻辑更简单、效果更稳定。

步骤1：创建独立的信息面板HTML #

直接在页面中添加一个div作为信息面板，无需将其包装为Three.js的CSS2DObject：

<!-- 可放在body内，或Three.js画布的父容器中 -->
<div id="info-panel">
  <h3>对象详情</h3>
  <div id="object-content"></div>
</div>

步骤2：用CSS固定定位到右上角 #

通过CSS让面板固定在画布的右上角，窗口大小变化时自动适配：

#info-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100; /* 确保显示在Three.js画布上方 */
  min-width: 250px;
}

如果你的Three.js画布嵌套在父容器内，记得给父容器添加position: relative;，这样面板会相对于父容器（而非整个页面）定位，位置更精准。

步骤3：点击3D对象时更新面板内容 #

在你的Raycaster点击检测逻辑中，直接操作这个HTML元素的内容即可，无需处理Three.js的坐标转换：

// 假设你已实现Raycaster点击检测逻辑
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);

if (intersects.length > 0) {
  const targetObj = intersects[0].object;
  // 填充信息面板内容
  const contentEl = document.getElementById('object-content');
  contentEl.innerHTML = `
    <p>名称：${targetObj.name || '未命名'}</p>
    <p>类型：${targetObj.type}</p>
    <p>位置：x=${targetObj.position.x.toFixed(2)}, y=${targetObj.position.y.toFixed(2)}, z=${targetObj.position.z.toFixed(2)}</p>
  `;
  // 若面板默认隐藏，此处可显示它
  document.getElementById('info-panel').style.display = 'block';
}

为什么之前的方案不可靠？ #

CSS2DObject的位置是基于3D空间坐标转换为屏幕坐标的，相机的平移、旋转、缩放，以及窗口大小变化都会重新计算转换关系，很难通过固定3D坐标让它始终停在屏幕角落。而普通HTML元素完全脱离Three.js的渲染流程，用CSS布局就能稳定控制位置，适配各种窗口尺寸。

内容的提问来源于stack exchange，提问作者Astarno