Loading...

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模式