INTERACTION · 单文件 HTML
Raycaster 点击拾取Raycaster mesh picking
鼠标点击用 Raycaster 命中 mesh，高亮或弹出信息。
旗舰完整演示
可交互场景（拖拽旋转；部分演示支持键盘）。下方提示词用于让 Agent 生成同级成品。
预期产出 · Returns
单 HTML：点击 mesh 变色或显示 name 标签；miss 时恢复。
适合用在哪
数字孪生点位、展厅展品、地图标注等需要「点选物体」的交互。
容易踩的坑
- OrbitControls 拖拽会误触发 click，需移动阈值判断。
提示词 · Prompt
单文件 HTML + Three.js：
1) 场景内随机放置 8 个不同颜色的 Box 或 Sphere，每个 userData.label 不同；
2) 使用 Raycaster + 归一化设备坐标处理 pointerdown；
3) 命中时：被点 mesh emissive 高亮，页面固定 div 显示 label；未命中清空高亮；
4) 同时使用 OrbitControls，注意 pointer 事件不要与拖拽冲突（可用 click 阈值区分）；
5) 中文注释解释 NDC 计算与 intersectObjects 顺序。
交付完整 HTML。
Single HTML: Raycaster picking on click, emissive highlight, label overlay, OrbitControls without drag/click conflict.