Three.js

three.js加载大模型大数据量优化方案

• 模型本身优化（最有效）
  • 减面（Decimation）
    • Blender / 3ds Max 减面
    • 保留轮廓，删掉看不见的面
  • 合并几何体（Merge Geometry）
    • 相同材质的物体合并成一个 Mesh
    • 减少 Draw Call
  • LOD（细节层次）
    • 远：低模
    • 近：高模
    • Three.js 自带 THREE.LOD
  • 纹理压缩 & 尺寸
    • 贴图最大 1024×1024 / 2048×2048 足够
    • 使用 basis / ktx2 压缩纹理
    • 尽量用 PowerOfTwo 尺寸（256/512/1024）
• 加载与解析优化
  • 使用 glTF /glb
    • 最轻量、解析最快的格式
    • 优先 draco 压缩
  • Draco 几何压缩
    • 模型体积可缩小 60%~90%
    • 使用 DRACOLoader
  • 流式加载 / 分块加载
    • 不要一次性加载整个模型
    • 模型分块，相机靠近再加载
  • WebWorker 解析
    • 用 GLTFPlugin 或自己拆 Worker
    • 不阻塞主线程
• 渲染性能优化
  • InstancedMesh（大量重复物体）
    • 树、建筑、零件 → 一个 Draw Call 搞定
  • Frustum Culling（视锥体裁剪）
    • 相机看不见的自动不渲染
    • 合理设置 mesh.frustumCulled = true
  • Occlusion Culling（遮挡剔除）
    • 被挡住的物体不渲染
    • 可用插件：Three-Mesh-Occlusion
  • 关闭阴影 / 简化阴影
    • 阴影非常耗性能
    • 小阴影贴图尺寸 512/1024
    • 只给关键物体开阴影
  • Material 优化
    • 少用 MeshStandardMaterial
    • 能用 MeshLambert / MeshPhong 就不用 PBR
    • 关闭不必要的光照
• 内存与控制
  • 及时 dispose
    • geometry.dispose()
    • material.dispose()
    • texture.dispose()
  • 控制场景物体数量
    • 远处物体直接visible=false
  • 降低像素比（pixelRatio）
    • renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5 或 1))
    • 移动端效果巨大
• 相机与渲染策略
  • 近裁切面别太小
    • camera.near = 0.1 改成 0.5/1
    • 提升深度精度，减少闪烁 & GPU 压力
  • 动态限制 FPS
    • inactive 页面降 FPS
    • 用 setAnimationLoop 自己控制