作为 3D 开发者，你是否遇到过：
- ❌ 每次都要写几百行 Three.js 样板代码
- ❌ 查文档、调参数，一个简单场景要花 2 小时
- ❌ 模型转换要记住各种命令行工具
- ❌ 最佳实践散落各处，不知道如何优化性能
现在，用自然语言和 AI，30 秒搞定。
# 1. 安装技能
git clone https://github.com/AIPMAndy/3d-dev-skill.git ~/.claude/skills/3d-dev-skill
# 2. 在 Claude Code 中说一句话
"创建一个旋转的地球，带大气层效果"
# 3. 完成！打开生成的 HTML 看效果就这么简单。
你说："创建一个粒子爆炸效果，有 5000 个粒子"
AI 生：完整的 HTML + Three.js 代码，可直接运行
- 基础场景：光照、相机、几何体
- 动画效果：旋转、缩放、路径动画
- 交互系统：鼠标控制、拖拽、点击
- 粒子系统：烟雾、火焰、星空
- 后处理：辉光、景深、色彩分级
- 物理引擎：碰撞、重力、刚体
"把 model.obj 转换成 GLTF 格式并优化"
# 自动调用 obj2gltf + gltf-pipeline- 性能优化建议（LOD、实例化、几何合并）
- 常见问题诊断（黑屏、闪烁、内存泄漏）
- 可复用组件库（天空盒、水面、地形）
|
粒子星空 ⏱️ 生成时间：15 秒 |
物理模拟 ⏱️ 生成时间：25 秒 |
着色器效果 ⏱️ 生成时间：20 秒 |
// 1. 引入库
import * as THREE from 'three';
// 2. 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 3. 创建几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 4. 添加光照
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 5. 设置相机位置
camera.position.z = 5;
// 6. 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// 7. 响应式处理
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// ... 还有几十行优化代码⏱️ 耗时：2-3 小时（包括查文档、调试）
"创建一个旋转的绿色立方体，带光照"
⏱️ 耗时：30 秒
效率提升：240 倍 🚀
| 功能分类 | 具体能力 | 命令示例 |
|---|---|---|
| 几何体 | 基础图形、复杂模型、自定义几何 | "创建一个扭曲的圆环" |
| 材质 | 标准材质、物理材质、着色器材质 | "使用金属材质，粗糙度 0.3" |
| 光照 | 环境光、平行光、点光源、聚光灯 | "添加暖色调的日落光照" |
| 动画 | 关键帧、路径、骨骼、变形 | "让立方体沿着正弦波路径移动" |
| 交互 | 鼠标、触摸、键盘、VR 控制器 | "添加 OrbitControls 和点击事件" |
| 粒子 | 点云、粒子系统、实例化 | "创建 10000 个粒子组成的烟雾" |
| 后处理 | Bloom、DOF、SSAO、色彩分级 | "添加辉光效果和景深" |
| 物理 | 碰撞检测、刚体、约束 | "让方块受重力影响掉落" |
| 资源 | GLTF、OBJ、FBX 加载和转换 | "加载 model.gltf 并添加动画" |
| 优化 | LOD、合并、实例化、压缩 | "优化场景，目标 60fps" |
- Claude Code（桌面版、CLI 或 Web 版）
- Node.js 16+（用于资源转换工具）
# 克隆到 Claude Code 技能目录
git clone https://github.com/AIPMAndy/3d-dev-skill.git ~/.claude/skills/3d-dev-skill
# 验证安装
ls ~/.claude/skills/3d-dev-skill在 Claude Code 中直接用自然语言描述你想要的 3D 场景：
示例 1：基础场景
"创建一个基础的 Three.js 场景，包含一个旋转的立方体"
示例 2：复杂效果
"创建一个粒子星空，有 5000 个星星随机分布，相机可以用鼠标控制"
示例 3：交互场景
"创建一个交互式场景，点击鼠标生成随机颜色的球体，球体会受重力影响下落"
示例 4：资源转换
"把 models/character.obj 转换成 GLTF 格式，并压缩纹理"
示例 5：性能优化
"分析这个场景的性能瓶颈，给出优化建议"
在 templates/ 目录下添加你自己的模板：
<!-- templates/my-template.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Custom Scene</title>
<!-- 模板代码 -->
</head>
</html>然后在对话中引用：
"使用 my-template 模板创建场景"
"创建一个场景：
1. 地面是一个大平面，带网格材质
2. 中心有一个旋转的地球模型
3. 周围有 1000 个小星星环绕
4. 添加鼠标控制相机
5. 添加辉光后处理效果"
生成的代码可以直接集成到你的项目中：
// 提取生成的核心逻辑
import { createScene } from './generated-scene.js';
const scene = createScene({
containerEl: document.getElementById('canvas'),
onReady: () => console.log('Scene loaded!')
});项目内置了丰富的参考文档：
- 最佳实践 - 性能优化、内存管理
- 组件库 - 可复用的代码片段
- 资源管道 - 模型处理工作流
- 故障排除 - 常见问题解决方案
- Dragonir 模式 - 创意场景参考
欢迎贡献你的模板、示例和改进建议！
- 添加新模板 - 分享你的炫酷场景
- 报告问题 - 发现 bug 或提出改进建议
- 完善文档 - 补充使用案例和最佳实践
- 分享作品 - 在 Discussions 展示你的创作
查看 贡献指南 了解详情。
用这个技能创造了酷炫的东西？我们想看到！
灵感来源：
- dragonir/3d - 优秀的 Three.js 创意演示
- playcanvas/supersplat - 3D 可视化工具
- 3DCellForge - 生物可视化项目
使用的工具：
- Three.js - WebGL 3D 库
- obj2gltf - OBJ 转 GLTF
- gltf-pipeline - GLTF 优化
- @gltf-transform/cli - 高级 GLTF 处理
MIT License - 详见 LICENSE
- 🐛 问题反馈：GitHub Issues
- 💭 功能建议：GitHub Discussions
- 🐦 Twitter：@aipmAndy
- 📧 邮件：联系作者
如果这个项目对你有帮助，请给个 ⭐ Star！
Made with ❤️ by Andy