mcpField
T
three-js

three-js

github.com/mindrally开发288814 次安装3 周前更新
代码仓库

关于 three-js

面向 Three.js 和 React Three Fiber 项目的开发技能，涵盖 React、Vite、TypeScript、Tailwind CSS 与 Next UI。内容结合编码规范、场景管理和渲染性能建议。

主要功能

  1. 01React 与 TypeScript 编码规范
  2. 02Three.js 场景生命周期建议
  3. 03React Three Fiber 模式
  4. 04渲染性能实践
  5. 05Tailwind CSS 响应式界面建议

适用场景

  1. 01构建 React Three Fiber 应用
  2. 02管理 Three.js 资源与场景
  3. 03优化复杂场景的渲染

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill three-js

安装后在 Claude Code 中输入/three-js确认已加载。

详细介绍

Three.js 开发

你精通 React、Vite、Tailwind CSS、Three.js、React Three Fiber 和 Next UI。

核心原则

  • 使用简洁、专业的语言作答，并提供准确的 React 示例
  • 使用函数式、声明式编程；避免使用类
  • 优先采用迭代和模块化，避免代码重复
  • 使用描述性变量名，并包含辅助动词（例如，isLoading、hasRendered）
  • 目录名称使用小写字母和连字符（例如，components/auth-wizard）
  • 组件优先使用命名导出

JavaScript/TypeScript 规范

  • 纯函数使用 "function" 关键字；省略分号
  • 所有代码均使用 TypeScript；优先使用接口而非类型
  • 避免使用枚举；改用映射
  • 文件结构：导出的组件、子组件、辅助函数、静态内容、类型

错误处理与验证

  • 在函数开头处理错误和边缘情况
  • 对错误情况使用提前返回，避免 if 语句嵌套过深
  • 将正常执行路径放在函数末尾，以提高可读性
  • 使用保护子句尽早处理前置条件和无效状态
  • 实现适当的错误日志记录和对用户友好的错误消息

React 最佳实践

组件指南
  • 使用函数组件和接口
  • 使用声明式 JSX
  • 组件使用 function，而非 const
  • 使用 Next UI 和 Tailwind CSS 构建组件并设置样式
  • 使用 Tailwind CSS 实现响应式设计
性能优化
  • 使用 fallback 将客户端组件包裹在 Suspense 中
  • 对非关键组件使用动态加载
  • 优化图片：采用 WebP 格式、调整数据大小并延迟加载

Three.js 专项指南

场景管理
  • 几何体、材质和纹理不再需要时，应妥善释放
  • 对频繁创建和销毁的对象使用对象池
  • 为复杂场景实现细节层次（LOD）
性能
  • 通过合并几何体和实例化，尽量减少绘制调用
  • 使用恰当大小和格式的纹理
  • 为大型场景实现视锥体剔除
  • 对渲染循环进行性能分析和优化
React Three Fiber
  • 使用 useFrame 钩子实现动画
  • 使用 useThree 访问 Three.js 上下文
  • 使用 refs 直接操作 Three.js 对象
  • 在 useEffect 钩子中实现妥善清理
  • 使用 drei 库的辅助工具实现常见的 3D 模式

评论

支持 Markdown