关于 threejs-skills
threejs-skills 是使用 Three.js 创建 3D 场景和交互体验的技能，为开发者提供场景设置、渲染、交互、动画及响应式处理指导。
主要功能
- 01Three.js 场景设置指导
- 02几何体、材质与照明
- 03鼠标交互处理
- 04动画与持续渲染
- 05响应窗口尺寸变化
适用场景
- 01创建可交互的 3D 对象
- 02构建可探索的 3D 场景
- 03添加动画效果或粒子
- 04在 3D 空间中可视化数据
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/threejs-skills确认已加载。
附带文件references/detailed-guide.md
详细介绍
Three.js 技能
使用 Three.js 最佳实践，系统地创建高质量的 3D 场景和交互体验。
详细指南
在执行此技能前，请阅读 详细指南。它保留了完整的流程和参考资料。请将其安全性、前置条件和验证要求视为强制要求。对于聚焦的工作，加载相关章节；对于端到端的工作，请完整阅读该指南。
何时使用
- 请求 3D 可视化或图形（“创建 3D 模型”、“以 3D 展示”）
- 想要交互式 3D 体验（“旋转立方体”、“可探索场景”）
- 需要 WebGL 或基于 canvas 的渲染
- 要求动画、粒子或视觉效果
- 提到 Three.js、WebGL 或 3D 渲染
- 想要在 3D 空间中可视化数据
工作流示例
用户：“创建一个响应鼠标移动的交互式 3D 球体”
- 设置：导入 Three.js，创建场景/相机/渲染器
- 几何体：创建
SphereGeometry(1, 32, 32)以获得平滑球体 - 材质：使用
MeshStandardMaterial获得逼真外观 - 光照：添加环境光 + 平行光
- 交互：跟踪鼠标位置，更新相机
- 动画：旋转球体，持续渲染
- 响应式：添加窗口大小调整处理程序
- 结果：平滑、交互式 3D 球体 ✓
限制
- 仅当任务明确符合上述范围时，才使用此技能。
- 请勿将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准，请停止并请求澄清。
评论
支持 Markdown