# Threejs Performance

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移...

- Repository: https://github.com/staruhub/ClaudeSkills (731 stars)
- Category: DevOps
- License: MIT
- Last updated: 2026-08-13
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add staruhub/ClaudeSkills --skill threejs-performance -g -a claude-code -y`
Codex: `npx skills add staruhub/ClaudeSkills --skill threejs-performance -g -a codex -y`
Cursor: `npx skills add staruhub/ClaudeSkills --skill threejs-performance -g -a cursor -y`
Gemini CLI: `npx skills add staruhub/ClaudeSkills --skill threejs-performance -g -a gemini-cli -y`

## Description

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词："Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于：通用 React 性能问题（用 vercel-react-best-practices）、WebGL/Three.js 入门教学、3D 美术资产的制作本身。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Three.js 性能优化指南

## 黄金法则

**绘制调用 < 100 次/帧。** 三角形数量不如绘制调用数量重要；超过 500 次绘制调用，强大 GPU 也会吃力。用 `renderer.info.render.calls` 监控（完整监控代码见 `references/examples.md`）。

## 诊断决策树

| 症状 | 先查 | 深入 |
|------|------|------|
| 掉帧、卡顿 | `renderer.info.render.calls` 是否 >100 | 实例化/合批（下文），后处理链 |
| 内存持续增长 | `renderer.info.memory` 的 geometries/textures 计数是否只增不减 | dispose 铁律（下文），`references/examples.md` 完整清理代码 |
| 加载慢、显存爆 | 模型是否未压缩 | `references/assets.md` 压缩管线 |
| 粒子/物理瓶颈 | CPU 粒子是否 >5 万 | WebGPU 计算着色器，`references/webgpu.md` |
| R3F 项目莫名重渲染 | useFrame 里是否 setState | R3F 三规则（下文） |

## 各领域规则速查

### WebGPU：何时迁移
绘制调用密集掉帧 / 需要计算着色器做物理粒子（CPU 约 5 万上限，GPU 可达数百万）/ 复杂后处理链卡顿。
`WebGPURenderer` 必须 `await renderer.init()`。TSL 写一次自动编译 WGSL/GLSL。
浏览器支持下限（记录时点数据，现查 caniuse 为准）：Chrome/Edge 113+，Firefox 141+，Safari 26+。
初始化回退、TSL 完整指南、计算着色器示例：`references/webgpu.md`。

### 绘制调用优化
- 大量**相同**几何体（树、石头）→ `InstancedMesh`：1000 棵树 = 1 次绘制
- 多个**不同**几何体共享材质 → `BatchedMesh`
- 静态小物件 → `mergeGeometries` 合并
- 材质**共享复用**，永远不要在循环里 `new Material`

### 资源压缩（收益数字）
- Draco 几何体压缩：体积减 90-95%
- KTX2 纹理：GPU 内存约降 10 倍
- 一条命令：`gltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress draco`
- 解码器路径配置与 Meshopt/Draco 选型：`references/assets.md`

### 内存铁律
**Three.js 不会自动回收 GPU 资源。** 移除对象必须：geometry.dispose() + 遍历 material 的所有 texture 属性逐个 dispose + material.dispose()；GLTF 的 ImageBitmap 还要 `texture.source.data.close()`。频繁增删对象用对象池。完整代码：`references/examples.md`。

### 着色器三规则
① 移动端 `precision mediump float`（约快 2 倍）② 用 `mix/step` 替代 if 分支（分支破坏 GPU 并行）③ 数据打包进 vec4，一次纹理取 4 个值。

### 光照阴影预算
活动光源 ≤3；PointLight 阴影 = 每光源 6 次阴影贴图渲染；贴图尺寸移动端 512-1024、桌面 1024-2048；静态场景 `shadowMap.autoUpdate = false` 手动触发 + 烘焙光照。

### React Three Fiber 三规则
① 动画走 `useFrame` 直改 ref，**永远不在 useFrame 里 setState** ② 静态场景用 `frameloop="demand"` + `invalidate()` 按需渲染 ③ 显隐切 `visible` 属性，不要条件挂载 `{show && <Model/>}`（重挂载重建资源）。完整优化模板：`references/examples.md`。

The rest: https://github.com/staruhub/ClaudeSkills/blob/HEAD/skills/Geek-skills-threejs-performance/SKILL.md