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