Three.js Skills for Claude Code

概览

GitHubGitHub

**Three.js Skills for Claude Code** 是一组面向 Claude Code 的 Three.js 技能文件（skill files），用于补充 AI 编程助手在 Three.js API 细节、最佳实践和常见模式方面的知识缺口。 ### 它解决什么问题 Claude Code 具备通用编程能力，但在处理 Three.js 时可能缺少准确的构造函数签名、导入路径或性能优化建议。这些技能文件通过提供经过官方文档（r160+）校验的参考资料和可运行示例，让生成的代码更准确。 ### 主要能力 项目包含 10 个技能模块，覆盖 Three.js 的核心领域： - **threejs-fundamentals**：场景搭建、相机、渲染器、Object3D 层级与坐标系。 - **threejs-geometry**：内置几何体、BufferGeometry、自定义几何体与实例化。 - **threejs-materials**：PBR 材质、基础/Phong/Standard 材质及着色器材质。 - **threejs-lighting**：光源类型、阴影、环境光照与灯光辅助对象。 - **threejs-textures**：纹理类型、UV 映射、环境贴图与渲染目标。 - **threejs-animation**：关键帧动画、骨骼动画、变形目标与动画混合。 - **threejs-loaders**：GLTF/GLB 加载、纹理加载、异步模式与缓存。 - **threejs-shaders**：GLSL 基础、ShaderMaterial、uniforms 与自定义效果。 - **threejs-postprocessing**：EffectComposer、bloom、景深、屏幕效果与自定义 pass。 - **threejs-interaction**：射线检测、相机控制、鼠标/触摸输入与物体选择。 ### 工作方式 当用户向 Claude Code 发出请求时，系统会根据上下文自动从 `.claude/skills` 目录加载匹配的技能文件。例如，要求创建 3D 场景会触发 `threejs-fundamentals`，要求加载 GLTF 模型会触发 `threejs-loaders`。 每个技能文件遵循统一结构，包含 Quick Start、Core Concepts、Common Patterns、Performance Tips 等章节。 ### 适合谁 使用 Claude Code 进行 Three.js 开发、需要 AI 辅助生成 3D 相关代码的开发者。

Q&A

如何安装这些技能文件？由 AI 生成

可以将仓库克隆到项目中，或复制 `.claude/skills` 目录。也支持以 git submodule 方式添加。命令为 `git clone https://github.com/pinkforest/threejs-playground.git` 或 `git submodule add https://github.com/pinkforest/threejs-playground.git`。

技能文件是如何被触发的？由 AI 生成

当用户向 Claude Code 提出请求时，系统会根据请求上下文自动从 `.claude/skills` 目录中加载匹配的技能文件。例如请求创建 3D 场景时会加载 threejs-fundamentals。

这些技能文件的内容可靠吗？由 AI 生成

技能文件已对照 Three.js 官方文档（r160+）进行审核，验证了类名、构造函数签名、属性与方法签名、导入路径（three/addons/ 格式）、代码示例以及当前最佳实践的准确性。

技能文件的结构是怎样的？由 AI 生成

每个技能文件使用 Markdown 格式，包含 YAML front matter（name 和 description），正文分为 Quick Start、Core Concepts、Common Patterns、Performance Tips 和 See Also 等章节。

这个项目使用什么许可证？由 AI 生成

MIT License，可以自由使用、修改和分发。