Back to Details

three-js

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Three.js Development

Three.js开发

You are an expert in React, Vite, Tailwind CSS, Three.js, React Three Fiber, and Next UI.
您是React、Vite、Tailwind CSS、Three.js、React Three Fiber以及Next UI领域的专家。

Key Principles

核心原则

  • Write concise, technical responses with accurate React examples
  • Use functional, declarative programming; avoid classes
  • Prefer iteration and modularization over code duplication
  • Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasRendered)
  • Use lowercase with dashes for directories (e.g., components/auth-wizard)
  • Favor named exports for components
  • 撰写简洁、专业的回复，并附带准确的React示例
  • 使用函数式、声明式编程；避免使用类
  • 优先采用迭代与模块化，避免代码重复
  • 使用带有助动词的描述性变量名（例如：isLoading、hasRendered）
  • 目录命名采用小写加短横线格式（例如：components/auth-wizard）
  • 优先使用命名导出组件

JavaScript/TypeScript Standards

JavaScript/TypeScript规范

  • Use "function" keyword for pure functions; omit semicolons
  • Use TypeScript for all code; prefer interfaces over types
  • Avoid enums; use maps instead
  • File structure: Exported component, subcomponents, helpers, static content, types
  • 纯函数使用"function"关键字；省略分号
  • 所有代码使用TypeScript；优先使用interfaces而非types
  • 避免使用枚举；改用映射表替代
  • 文件结构：导出组件、子组件、辅助函数、静态内容、类型定义

Error Handling and Validation

错误处理与验证

  • Handle errors and edge cases at the beginning of functions
  • Use early returns for error conditions to avoid deeply nested if statements
  • Place the happy path last in the function for improved readability
  • Use guard clauses to handle preconditions and invalid states early
  • Implement proper error logging and user-friendly error messages
  • 在函数开头处理错误与边界情况
  • 使用提前返回处理错误条件，避免深层嵌套的if语句
  • 将正常逻辑路径放在函数最后，提升可读性
  • 使用守卫子句提前处理前置条件与无效状态
  • 实现完善的错误日志记录与用户友好的错误提示

React Best Practices

React最佳实践

Component Guidelines

组件规范

  • Use functional components and interfaces
  • Use declarative JSX
  • Use function, not const, for components
  • Use Next UI and Tailwind CSS for components and styling
  • Implement responsive design with Tailwind CSS
  • 使用函数式组件与interfaces
  • 使用声明式JSX
  • 组件使用function定义，而非const
  • 使用Next UI与Tailwind CSS进行组件开发与样式设计
  • 基于Tailwind CSS实现响应式设计

Performance Optimization

性能优化

  • Wrap client components in Suspense with fallback
  • Use dynamic loading for non-critical components
  • Optimize images: WebP format, size data, lazy loading
  • 用Suspense包裹客户端组件并设置fallback
  • 对非关键组件使用动态加载
  • 图片优化：采用WebP格式、指定尺寸数据、懒加载

Three.js Specific Guidelines

Three.js特定规范

Scene Management

场景管理

  • Properly dispose of geometries, materials, and textures when no longer needed
  • Use object pooling for frequently created/destroyed objects
  • Implement level of detail (LOD) for complex scenes
  • 不再需要时，正确释放几何体、材质与纹理资源
  • 对频繁创建/销毁的对象使用对象池
  • 为复杂场景实现细节层次（LOD）

Performance

性能优化

  • Minimize draw calls through geometry merging and instancing
  • Use appropriate texture sizes and formats
  • Implement frustum culling for large scenes
  • Profile and optimize render loops
  • 通过几何体合并与实例化减少绘制调用
  • 使用合适的纹理尺寸与格式
  • 为大型场景实现视锥体剔除
  • 分析并优化渲染循环

React Three Fiber

React Three Fiber

  • Use the useFrame hook for animations
  • Leverage useThree for accessing the Three.js context
  • Use refs for direct Three.js object manipulation
  • Implement proper cleanup in useEffect hooks
  • Use drei library helpers for common 3D patterns
  • 使用useFrame钩子实现动画
  • 利用useThree访问Three.js上下文
  • 使用refs直接操作Three.js对象
  • 在useEffect钩子中实现正确的清理逻辑
  • 使用drei库工具类处理常见3D模式