three-js
✓当用户要求“创建 3D 场景”、“添加网格”、 “实现 OrbitControls”、“加载 GLTF 模型”、“添加布隆后处理”、 “编写自定义着色器”、“创建粒子效果”、“优化 Three.js 性能”、 “使用 WebGPU”、“添加阴影”、“对模型进行动画处理”，或提及 Three.js、Threejs、WebGL、 WebGPU、GLTF、光线投射器、着色器材质、PBR 材质或后处理效果。 重要提示：此技能适用于 VANILLA Three.js（命令式 JavaScript）。对于反应三 Fiber（@react-third/fibre、R3F、drei），请检查“r3f-best-practices”技能，尽管 Three-js 技能在使用 R3F 时会有所帮助，因为 R3F 是 Three.js 的 React 渲染器。 为 3D Web 图形提供完整的 Three.js 参考，包括场景设置、 几何、材料、纹理、照明、相机、装载机、动画、控件、 交互、着色器、后处理、性能优化、TSL/节点材质、 WebGPU、物理和 VR/XR 集成。
SKILL.md
React Three Fiber users: This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.
| references/01-fundamentals.md | Scene setup, renderer config, Object3D hierarchy, coordinate systems | | references/02-geometry.md | Creating shapes, BufferGeometry, instancing, points, lines | | references/06-cameras.md | Camera types, frustum, viewport, projection | | references/13-math.md | Vector3, Matrix4, Quaternion, Euler, Color, MathUtils |
| references/03-materials.md | PBR materials, shader materials, all material types | | references/04-textures.md | Texture loading, UV mapping, render targets, environment maps | | references/05-lighting.md | Light types, shadows, IBL, light probes | | references/11-shaders.md | Custom GLSL shaders, uniforms, varyings, shader patterns |
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/noklip-io/agent-skills --skill three-js- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 three-js？
当用户要求“创建 3D 场景”、“添加网格”、 “实现 OrbitControls”、“加载 GLTF 模型”、“添加布隆后处理”、 “编写自定义着色器”、“创建粒子效果”、“优化 Three.js 性能”、 “使用 WebGPU”、“添加阴影”、“对模型进行动画处理”，或提及 Three.js、Threejs、WebGL、 WebGPU、GLTF、光线投射器、着色器材质、PBR 材质或后处理效果。 重要提示：此技能适用于 VANILLA Three.js（命令式 JavaScript）。对于反应三 Fiber（@react-third/fibre、R3F、drei），请检查“r3f-best-practices”技能，尽管 Three-js 技能在使用 R3F 时会有所帮助，因为 R3F 是 Three.js 的 React 渲染器。 为 3D Web 图形提供完整的 Three.js 参考，包括场景设置、 几何、材料、纹理、照明、相机、装载机、动画、控件、 交互、着色器、后处理、性能优化、TSL/节点材质、 WebGPU、物理和 VR/XR 集成。 来源：noklip-io/agent-skills。
如何安装 three-js？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/noklip-io/agent-skills --skill three-js 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/noklip-io/agent-skills
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-01