three-best-practices by emalorenzo/three-agent-skills
npx skills add https://github.com/emalorenzo/three-agent-skills --skill three-best-practices适用于 Three.js 应用程序的全面性能优化指南。包含 18 个类别下的 120 多条规则,按影响程度排序。
此技能汇集了多个权威来源的最佳实践:
- 由 mrdoob 维护的 Three.js
llms分支的官方指南- Utsubo 的 100 Three.js 技巧 - 涵盖 WebGPU、资源优化和性能技巧的优秀综合指南
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响程度 | 前缀 |
|---|---|---|---|
| 0 | 现代设置与导入 | 基础 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
setup- |
| 1 | 内存管理与释放 | 关键 | memory- |
| 2 | 渲染循环优化 | 关键 | render- |
| 3 | 绘制调用优化 | 关键 | drawcall- |
| 4 | 几何体与缓冲区管理 | 高 | geometry- |
| 5 | 材质与纹理优化 | 高 | material- |
| 6 | 资源压缩 | 高 | asset- |
| 7 | 光照与阴影 | 中高 | lighting- |
| 8 | 场景图组织 | 中 | scene- |
| 9 | 着色器最佳实践 (GLSL) | 中 | shader- |
| 10 | TSL (Three.js 着色语言) | 中 | tsl- |
| 11 | WebGPU 渲染器 | 中 | webgpu- |
| 12 | 加载与资源 | 中 | loading- |
| 13 | 核心 Web 指标 | 中高 | vitals- |
| 14 | 相机与控制器 | 低中 | camera- |
| 15 | 动画系统 | 中 | animation- |
| 16 | 物理集成 | 中 | physics- |
| 17 | WebXR / VR / AR | 中 | webxr- |
| 18 | 音频 | 低中 | audio- |
| 19 | 后期处理 | 中 | postpro- |
| 20 | 移动端优化 | 高 | mobile- |
| 21 | 生产环境 | 高 | error-, migration- |
| 22 | 调试与开发工具 | 低 | debug- |
setup-use-import-maps - 使用导入映射,而非旧的 CDN 脚本setup-choose-renderer - WebGLRenderer(默认)与 WebGPURenderer(TSL/计算)setup-animation-loop - 使用 renderer.setAnimationLoop(),而非手动 RAFsetup-basic-scene-template - 完整的现代场景模板memory-dispose-geometry - 始终释放几何体memory-dispose-material - 始终释放材质和纹理memory-dispose-textures - 释放动态创建的纹理memory-dispose-render-targets - 始终释放 WebGLRenderTargetmemory-dispose-recursive - 对层级结构使用递归释放memory-dispose-on-unmount - 在 React 清理/卸载时释放memory-renderer-dispose - 销毁视图时释放渲染器memory-reuse-objects - 重用几何体和材质render-single-raf - 单一 requestAnimationFrame 循环render-conditional - 对静态场景按需渲染render-delta-time - 使用增量时间进行动画render-avoid-allocations - 切勿在渲染循环中分配内存render-cache-computations - 缓存昂贵的计算render-frustum-culling - 启用视锥体剔除render-update-matrix-manual - 对静态对象禁用自动矩阵更新render-pixel-ratio - 将像素比限制为 2render-antialias-wisely - 明智地使用抗锯齿draw-call-optimization - 目标每帧绘制调用少于 100 次geometry-instanced-mesh - 对相同对象使用 InstancedMeshgeometry-batched-mesh - 对不同的几何体(相同材质)使用 BatchedMeshgeometry-merge-static - 使用 BufferGeometryUtils 合并静态几何体geometry-buffer-geometry - 始终使用 BufferGeometrygeometry-merge-static - 合并静态几何体geometry-instanced-mesh - 对相同对象使用 InstancedMeshgeometry-lod - 对复杂模型使用细节层次geometry-index-buffer - 使用索引几何体geometry-vertex-count - 最小化顶点数量geometry-attributes-typed - 使用适当的类型化数组geometry-interleaved - 考虑使用交错缓冲区material-reuse - 在多个网格间重用材质material-simplest-sufficient - 使用能满足需求的最简单材质material-texture-size-power-of-two - 纹理尺寸为 2 的幂material-texture-compression - 使用压缩纹理 (KTX2/Basis)material-texture-mipmaps - 适当地启用 Mipmapmaterial-texture-anisotropy - 对地板使用各向异性过滤material-texture-atlas - 使用纹理图集material-avoid-transparency - 尽量减少透明材质material-onbeforecompile - 使用 onBeforeCompile 进行着色器修改(或使用 TSL)asset-compression - Draco、Meshopt、KTX2 压缩指南asset-draco - 减少 90-95% 的几何体大小asset-ktx2 - GPU 压缩纹理 (UASTC vs ETC1S)asset-meshopt - Draco 的替代方案,解压更快asset-lod - 细节层次可提高 30-40% 的帧率lighting-limit-lights - 将活动光源限制在 3 个或更少lighting-shadows-advanced - PointLight 开销、CSM、伪阴影lighting-bake-static - 为静态场景烘焙光照lighting-shadow-camera-tight - 紧密贴合阴影相机lighting-shadow-map-size - 选择合适的阴影分辨率 (512-4096)lighting-shadow-selective - 有选择地启用阴影lighting-shadow-cascade - 对大型场景使用 CSMlighting-shadow-auto-update - 对静态场景禁用 autoUpdatelighting-probe - 使用光照探针lighting-environment - 使用环境贴图进行环境光照lighting-fake-shadows - 使用渐变平面实现预算接触阴影scene-group-objects - 使用 Group 进行组织scene-layers - 使用 Layers 进行选择性渲染scene-visible-toggle - 使用 visible 标志,而非 add/removescene-flatten-static - 展平静态层级结构scene-name-objects - 为对象命名以便调试object-pooling - 重用对象而非创建/销毁shader-precision - 在移动端使用 mediump(约快 2 倍)shader-mobile - 移动端特定优化(varyings、分支)shader-avoid-branching - 使用 mix/step 替换条件语句shader-precompute-cpu - 在 CPU 上预计算shader-avoid-discard - 避免使用 discard,改用 alphaTestshader-texture-lod - 对已知的 mip 级别使用 textureLodshader-uniform-arrays - 优先使用 uniform 数组shader-varying-interpolation - 在移动端将 varyings 限制在 3 个以内shader-pack-data - 将数据打包到 RGBA 通道中shader-chunk-injection - 使用 Three.js 着色器代码块tsl-why-use - 使用 TSL 而非 onBeforeCompiletsl-setup-webgpu - TSL 的 WebGPU 设置tsl-complete-reference - 完整的 TSL 类型系统和函数tsl-material-slots - 材质节点属性参考tsl-node-materials - 使用 NodeMaterial 类tsl-basic-operations - 类型、操作、分量混合tsl-functions - 使用 Fn() 创建 TSL 函数tsl-conditionals - TSL 中的 If、select、循环tsl-textures - 纹理和三平面映射tsl-noise - 内置噪声函数 (mx_noise_float, mx_fractal_noise)tsl-post-processing - 辉光、模糊、景深、环境光遮蔽tsl-compute-shaders - GPGPU 和计算操作tsl-glsl-to-tsl - GLSL 到 TSL 的转换webgpu-renderer - 设置、浏览器支持、迁移指南webgpu-render-async - 对计算密集型场景使用 renderAsyncwebgpu-feature-detection - 检查适配器功能webgpu-instanced-array - GPU 持久化缓冲区webgpu-storage-textures - 读写计算纹理webgpu-workgroup-memory - 共享内存(快 10-100 倍)webgpu-indirect-draws - GPU 驱动渲染loading-draco-compression - 对大型网格使用 Dracoloading-gltf-preferred - 使用 glTF 格式gltf-loading-optimization - 包含 DRACO/Meshopt/KTX2 的完整加载器设置loading-progress-feedback - 显示加载进度loading-async-await - 使用 async/await 进行加载loading-lazy - 延迟加载非关键资源loading-cache-assets - 启用缓存loading-dispose-unused - 卸载未使用的资源core-web-vitals - 针对 3D 的 LCP、FID、CLS 优化vitals-lazy-load - 使用 IntersectionObserver 延迟加载首屏以下的 3D 内容vitals-code-split - 动态导入 Three.js 模块vitals-preload - 使用 link 标签预加载关键资源vitals-progressive-loading - 从低分辨率到高分辨率的渐进式加载vitals-placeholders - 加载期间显示占位几何体vitals-web-workers - 将繁重工作卸载到 Web Workervitals-streaming - 分块流式传输大型场景camera-near-far - 设置紧密的近/远平面camera-fov - 选择合适的视场角camera-controls-damping - 使用阻尼实现平滑控制camera-resize-handler - 正确处理窗口大小调整camera-orbit-limits - 设置轨道控制器限制animation-system - AnimationMixer、混合、变形目标、骨骼physics-integration - Rapier、Cannon-es 集成模式physics-compute-shaders - 使用计算着色器的 GPU 物理webxr-setup - VR/AR 按钮、控制器、命中测试audio-spatial - PositionalAudio、HRTF、空间音效postprocessing-optimization - pmndrs/postprocessing 指南postpro-renderer-config - 为后期处理禁用 AA、模板、深度postpro-merge-effects - 在单次通道中合并效果postpro-selective-bloom - 选择性辉光以提高性能postpro-resolution-scaling - 半分辨率可提高 2 倍 FPSpostpro-webgpu-native - 基于 TSL 的 WebGPU 后期处理mobile-optimization - 移动端特定优化和检查清单raycasting-optimization - BVH、图层、GPU 拾取error-handling-recovery - WebGL 上下文丢失与恢复migration-checklist - 按版本划分的重大变更debug-devtools - 完整的调试工具包debug-stats-gl - 用于 WebGL/WebGPU 监控的 stats-gldebug-lil-gui - 用于实时参数调整的 lil-guidebug-spector - 用于 WebGL 帧捕获的 Spector.jsdebug-renderer-info - 监控绘制调用和内存debug-three-mesh-bvh - 使用 BVH 进行快速光线投射debug-context-lost - 处理 WebGL 上下文丢失debug-animation-loop-profiling - 分析渲染循环各部分debug-conditional - 在生产环境中移除调试代码阅读各个规则文件以获取详细说明和代码示例:
rules/setup-use-import-maps.md
rules/memory-dispose-geometry.md
rules/tsl-complete-reference.md
rules/mobile-optimization.md
每个规则文件包含:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
"three/tsl": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.tsl.js"
}
}
</script>
function disposeObject(obj) {
if (obj.geometry) obj.geometry.dispose();
if (obj.material) {
if (Array.isArray(obj.material)) {
obj.material.forEach(m => m.dispose());
} else {
obj.material.dispose();
}
}
}
import { texture, uv, color, time, sin } from 'three/tsl';
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = texture(map).mul(color(0xff0000));
material.colorNode = color(0x00ff00).mul(sin(time).mul(0.5).add(0.5));
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));
每周安装量
300
代码仓库
GitHub 星标数
14
首次出现
2026年1月19日
安全审计
安装于
opencode227
gemini-cli217
codex212
claude-code208
github-copilot194
cursor180
Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact.
This skill compiles best practices from multiple authoritative sources:
- Official guidelines from Three.js
llmsbranch maintained by mrdoob- 100 Three.js Tips by Utsubo - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 0 | Modern Setup & Imports | FUNDAMENTAL | setup- |
| 1 | Memory Management & Dispose | CRITICAL | memory- |
| 2 | Render Loop Optimization | CRITICAL | render- |
| 3 | Draw Call Optimization | CRITICAL | drawcall- |
| 4 | Geometry & Buffer Management | HIGH | geometry- |
| 5 |
setup-use-import-maps - Use Import Maps, not old CDN scriptssetup-choose-renderer - WebGLRenderer (default) vs WebGPURenderer (TSL/compute)setup-animation-loop - Use renderer.setAnimationLoop() not manual RAFsetup-basic-scene-template - Complete modern scene templatememory-dispose-geometry - Always dispose geometriesmemory-dispose-material - Always dispose materials and texturesmemory-dispose-textures - Dispose dynamically created texturesmemory-dispose-render-targets - Always dispose WebGLRenderTargetmemory-dispose-recursive - Use recursive disposal for hierarchiesmemory-dispose-on-unmount - Dispose in React cleanup/unmountmemory-renderer-dispose - Dispose renderer when destroying viewmemory-reuse-objects - Reuse geometries and materialsrender-single-raf - Single requestAnimationFrame looprender-conditional - Render on demand for static scenesrender-delta-time - Use delta time for animationsrender-avoid-allocations - Never allocate in render looprender-cache-computations - Cache expensive computationsrender-frustum-culling - Enable frustum cullingrender-update-matrix-manual - Disable auto matrix updates for static objectsrender-pixel-ratio - Limit pixel ratio to 2render-antialias-wisely - Use antialiasing judiciouslydraw-call-optimization - Target under 100 draw calls per framegeometry-instanced-mesh - Use InstancedMesh for identical objectsgeometry-batched-mesh - Use BatchedMesh for varied geometries (same material)geometry-merge-static - Merge static geometries with BufferGeometryUtilsgeometry-buffer-geometry - Always use BufferGeometrygeometry-merge-static - Merge static geometriesgeometry-instanced-mesh - Use InstancedMesh for identical objectsgeometry-lod - Use Level of Detail for complex modelsgeometry-index-buffer - Use indexed geometrygeometry-vertex-count - Minimize vertex countgeometry-attributes-typed - Use appropriate typed arraysgeometry-interleaved - Consider interleaved buffersmaterial-reuse - Reuse materials across meshesmaterial-simplest-sufficient - Use simplest material that worksmaterial-texture-size-power-of-two - Power-of-two texture dimensionsmaterial-texture-compression - Use compressed textures (KTX2/Basis)material-texture-mipmaps - Enable mipmaps appropriatelymaterial-texture-anisotropy - Use anisotropic filtering for floorsmaterial-texture-atlas - Use texture atlasesmaterial-avoid-transparency - Minimize transparent materialsmaterial-onbeforecompile - Use onBeforeCompile for shader mods (or TSL)asset-compression - Draco, Meshopt, KTX2 compression guideasset-draco - 90-95% geometry size reductionasset-ktx2 - GPU-compressed textures (UASTC vs ETC1S)asset-meshopt - Alternative to Draco with faster decompressionasset-lod - Level of Detail for 30-40% frame rate improvementlighting-limit-lights - Limit to 3 or fewer active lightslighting-shadows-advanced - PointLight cost, CSM, fake shadowslighting-bake-static - Bake lighting for static sceneslighting-shadow-camera-tight - Fit shadow camera tightlylighting-shadow-map-size - Choose appropriate shadow resolution (512-4096)lighting-shadow-selective - Enable shadows selectivelylighting-shadow-cascade - Use CSM for large sceneslighting-shadow-auto-update - Disable autoUpdate for static sceneslighting-probe - Use Light Probesscene-group-objects - Use Groups for organizationscene-layers - Use Layers for selective renderingscene-visible-toggle - Use visible flag, not add/removescene-flatten-static - Flatten static hierarchiesscene-name-objects - Name objects for debuggingobject-pooling - Reuse objects instead of create/destroyshader-precision - Use mediump for mobile (~2x faster)shader-mobile - Mobile-specific optimizations (varyings, branching)shader-avoid-branching - Replace conditionals with mix/stepshader-precompute-cpu - Precompute on CPUshader-avoid-discard - Avoid discard, use alphaTestshader-texture-lod - Use textureLod for known mip levelsshader-uniform-arrays - Prefer uniform arraysshader-varying-interpolation - Limit varyings to 3 for mobileshader-pack-data - Pack data into RGBA channelstsl-why-use - Use TSL instead of onBeforeCompiletsl-setup-webgpu - WebGPU setup for TSLtsl-complete-reference - Full TSL type system and functionstsl-material-slots - Material node properties referencetsl-node-materials - Use NodeMaterial classestsl-basic-operations - Types, operations, swizzlingtsl-functions - Creating TSL functions with Fn()tsl-conditionals - If, select, loops in TSLtsl-textures - Textures and triplanar mappingwebgpu-renderer - Setup, browser support, migration guidewebgpu-render-async - Use renderAsync for compute-heavy sceneswebgpu-feature-detection - Check adapter featureswebgpu-instanced-array - GPU-persistent bufferswebgpu-storage-textures - Read-write compute textureswebgpu-workgroup-memory - Shared memory (10-100x faster)webgpu-indirect-draws - GPU-driven renderingloading-draco-compression - Use Draco for large meshesloading-gltf-preferred - Use glTF formatgltf-loading-optimization - Full loader setup with DRACO/Meshopt/KTX2loading-progress-feedback - Show loading progressloading-async-await - Use async/await for loadingloading-lazy - Lazy load non-critical assetsloading-cache-assets - Enable cachingloading-dispose-unused - Unload unused assetscore-web-vitals - LCP, FID, CLS optimization for 3Dvitals-lazy-load - Lazy load 3D below the fold with IntersectionObservervitals-code-split - Dynamic import Three.js modulesvitals-preload - Preload critical assets with link tagsvitals-progressive-loading - Low-res to high-res progressive loadvitals-placeholders - Show placeholder geometry during loadvitals-web-workers - Offload heavy work to workersvitals-streaming - Stream large scenes by chunkscamera-near-far - Set tight near/far planescamera-fov - Choose appropriate FOVcamera-controls-damping - Use damping for smooth controlscamera-resize-handler - Handle resize properlycamera-orbit-limits - Set orbit control limitsanimation-system - AnimationMixer, blending, morph targets, skeletalphysics-integration - Rapier, Cannon-es integration patternsphysics-compute-shaders - GPU physics with compute shaderswebxr-setup - VR/AR buttons, controllers, hit testingaudio-spatial - PositionalAudio, HRTF, spatial soundpostprocessing-optimization - pmndrs/postprocessing guidepostpro-renderer-config - Disable AA, stencil, depth for postpostpro-merge-effects - Combine effects in single passpostpro-selective-bloom - Selective bloom for performancepostpro-resolution-scaling - Half resolution for 2x FPSpostpro-webgpu-native - TSL-based post for WebGPUmobile-optimization - Mobile-specific optimizations and checklistraycasting-optimization - BVH, layers, GPU pickingerror-handling-recovery - WebGL context loss and recoverymigration-checklist - Breaking changes by versiondebug-devtools - Complete debugging toolkitdebug-stats-gl - stats-gl for WebGL/WebGPU monitoringdebug-lil-gui - lil-gui for live parameter tweakingdebug-spector - Spector.js for WebGL frame capturedebug-renderer-info - Monitor draw calls and memorydebug-three-mesh-bvh - Fast raycasting with BVHdebug-context-lost - Handle WebGL context lossdebug-animation-loop-profiling - Profile render loop sectionsdebug-conditional - Remove debug code in productionRead individual rule files for detailed explanations and code examples:
rules/setup-use-import-maps.md
rules/memory-dispose-geometry.md
rules/tsl-complete-reference.md
rules/mobile-optimization.md
Each rule file contains:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
"three/tsl": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.tsl.js"
}
}
</script>
function disposeObject(obj) {
if (obj.geometry) obj.geometry.dispose();
if (obj.material) {
if (Array.isArray(obj.material)) {
obj.material.forEach(m => m.dispose());
} else {
obj.material.dispose();
}
}
}
import { texture, uv, color, time, sin } from 'three/tsl';
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = texture(map).mul(color(0xff0000));
material.colorNode = color(0x00ff00).mul(sin(time).mul(0.5).add(0.5));
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));
Weekly Installs
300
Repository
GitHub Stars
14
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode227
gemini-cli217
codex212
claude-code208
github-copilot194
cursor180
Vue.js测试最佳实践:Vue 3组件、组合式函数、Pinia与异步测试完整指南
3,700 周安装
| Material & Texture Optimization |
| HIGH |
material- |
| 6 | Asset Compression | HIGH | asset- |
| 7 | Lighting & Shadows | MEDIUM-HIGH | lighting- |
| 8 | Scene Graph Organization | MEDIUM | scene- |
| 9 | Shader Best Practices (GLSL) | MEDIUM | shader- |
| 10 | TSL (Three.js Shading Language) | MEDIUM | tsl- |
| 11 | WebGPU Renderer | MEDIUM | webgpu- |
| 12 | Loading & Assets | MEDIUM | loading- |
| 13 | Core Web Vitals | MEDIUM-HIGH | vitals- |
| 14 | Camera & Controls | LOW-MEDIUM | camera- |
| 15 | Animation System | MEDIUM | animation- |
| 16 | Physics Integration | MEDIUM | physics- |
| 17 | WebXR / VR / AR | MEDIUM | webxr- |
| 18 | Audio | LOW-MEDIUM | audio- |
| 19 | Post-Processing | MEDIUM | postpro- |
| 20 | Mobile Optimization | HIGH | mobile- |
| 21 | Production | HIGH | error-, migration- |
| 22 | Debug & DevTools | LOW | debug- |
lighting-environment - Environment maps for ambient lightlighting-fake-shadows - Gradient planes for budget contact shadowsshader-chunk-injection - Use Three.js shader chunkstsl-noise - Built-in noise functions (mx_noise_float, mx_fractal_noise)tsl-post-processing - bloom, blur, dof, aotsl-compute-shaders - GPGPU and compute operationstsl-glsl-to-tsl - GLSL to TSL translation