Three.js Skills for Claude Code

Three.js Skills for Claude Code

为 Claude Code 提供 three.js 最新版本知识的技能文件集，确保 AI 生成的代码与你实际安装的 three.js 版本兼容。

为什么需要它？

Claude Code 的训练数据混合了多个 three.js 版本，而 r160 到 r186 之间发生了大量破坏性变更：

• RGBELoader 更名为 HDRLoader
• Clock 被 Timer 取代
• PostProcessing 变为 RenderPipeline
• WebGL 1 支持被移除
• 官方文档推荐使用 WebGPURenderer 与 TSL 编写自定义着色器

这些技能文件为 Claude Code 提供当前 API、可运行示例以及「常见错误」列表，帮助模型避开过时写法。

包含的技能

安装方式

使用 skills CLI：

npx skills add cloudai-x/threejs-skills

或手动克隆并复制到 Claude Code 技能目录：

git clone https://github.com/CloudAI-X/threejs-skills.git

# 全局安装（所有项目）
mkdir -p ~/.claude/skills && cp -r threejs-skills/skills/* ~/.claude/skills/

# 或项目级安装（在项目根目录执行）
mkdir -p .claude/skills && cp -r threejs-skills/skills/* .claude/skills/

工作原理

当你的请求匹配技能描述时，Claude Code 会自动加载对应技能。例如：

• 创建 3D 场景 → threejs-fundamentals
• 添加光照与阴影 → threejs-lighting
• 加载 glTF 模型 → threejs-loaders
• 编写自定义着色器 → threejs-shaders 与 threejs-postprocessing
• 优化慢场景 → threejs-performance
• 使用 React 构建场景 → threejs-react-three-fiber
• 压缩 glTF 资产 → threejs-asset-pipeline

技能文件结构

每个技能遵循统一布局：

---
name: threejs-<topic>
description: "技能覆盖内容。使用时机..."
---

# Three.js <Topic>

目标版本 three.js r186。示例使用 WebGLRenderer；WebGPU 与 TSL 部分使用 WebGPURenderer。

## Quick Start          完整可运行示例
## <topic sections>     带示例的 API 说明
## WebGPU and TSL       WebGPURenderer 下的同一主题
## Common Mistakes      过时或错误代码 → r186 修复方案
## See Also             相关技能

验证情况

技能内容已对照 three@0.186.1 官方迁移指南，以及 @react-three/fiber@9.8.2、@react-three/drei@10.7.9、@gltf-transform/cli@4.5.1 和 gltfjsx@6.5.3 进行验证：

• 所有导入路径和 THREE.* 类均存在于对应包中
• 每个 JavaScript 代码块均可解析为 ES 模块
• 着色器块名称存在，示例中无已移除或重命名的 API
• gltf-transform 命令与标志均有效
• React Three Fiber 元素均映射到 three.js 类

适用人群

• 使用 Claude Code 进行 three.js 开发的工程师
• 需要确保 AI 生成代码符合最新版本的团队
• 希望减少因 API 过时导致调试时间的开发者

许可

MIT 许可证，详见仓库 LICENSE 文件。