Three.js 三维交互

要解决什么问题

在 Web 里做 3D 展示、产品预览或简单交互场景时，Three.js 是常见选型，但 API 面大：场景图、WebGLRenderer、几何体与材质、相机与光照、动画与事件拾取往往要反复查文档和对照示例。本技能面向「用 Three.js 搭 3D 元素并做出可交互体验」这一具体目标，把常见任务收敛成可复用的思路，而不是从零散教程里拼凑。

技能如何帮助你

技能提供与 Three.js 相关的开发指引与模式，帮助你在对话中更一致地：

• 规划最小可运行的场景结构（场景、相机、渲染循环）
• 组织几何体、材质与网格的创建方式
• 处理基础的交互与体验形态（如视角、拾取、简单动画等方向上的约定）

具体 API 细节与进阶能力仍以官方文档与源仓库说明为准；技能侧重「怎么拆问题、按什么顺序做」的工程化叙述。

适用边界

• 适合：需要在页面中引入 Three.js、实现 3D 元素或轻到中等复杂度的交互式 3D 体验，并希望 agent 按统一模式产出代码与结构时。
• 不适合：纯 2D Canvas/CSS 动效、与 Three.js 无关的图形栈，或要求完整游戏引擎级物理/网络同步方案——这些应换用对应技术栈或专门库。
• 若项目已有严格的内部 Three.js 封装规范，应以团队规范优先，本技能作通用参考即可。