INTERACTION · Vite + three
CSS2DRenderer 三维标注CSS2D labels on 3D points
在 3D 锚点上叠 HTML 标签，适合数据点名称、设备铭牌。
旗舰完整演示
可交互场景（拖拽旋转；部分演示支持键盘）。下方提示词用于让 Agent 生成同级成品。
预期产出 · Returns
Vite：多个锚点 + 可拖拽 Orbit，标签始终面向用户且不挡 WebGL 事件策略说明。
适合用在哪
数字孪生标注、地图点位、IoT 设备名。
容易踩的坑
- CSS2D 层可能挡住 canvas 点击，需 pointer-events: none 再对标签单独开启。
提示词 · Prompt
Vite + Three.js：
1) 使用 CSS2DRenderer + CSS2DObject（examples/jsm/renderers/CSS2DRenderer.js）；
2) WebGLRenderer 与 CSS2DRenderer 同尺寸叠加；
3) 至少 5 个 Object3D 锚点，标签为 div 带标题与数值；
4) resize 同步两个 renderer；
5) 注释 pointer-events 对标签点击的影响；
6) OrbitControls 正常可用。
给出完整 main 与样式。
Vite CSS2DRenderer labels on anchors, dual renderer resize sync.