three.js低多边形3D模型

适用于three.js的低多边形风格3D模型

全部42个模型都以 GLB 提供，并自带 LOD0–LOD3 四个层级：用 three/addons 里的 GLTFLoader 加载，再通过 lod.addLevel(mesh, distance) 交给 THREE.LOD，细节层级会随相机距离逐帧切换。这里的树叶是实体几何而非透明贴片，因此没有 alpha test，也没有透明 overdraw，橡树、欧洲赤松、白桦和竹子即使在移动 GPU 上也很轻。

颜色存放在顶点色（COLOR_0）中，所以一个共享材质就能覆盖场景里的全部树木、仙人掌和岩石，InstancedMesh 可以一次绘制调用画出上千份副本。实例请按 chunk 分组，因为 THREE.LOD 不作用于单个实例。预算在 LOD0 下从几百到约两千个三角面。不可见的碰撞网格可以直接交给 Rapier 或 cannon-es，WebGLRenderer 与 WebGPURenderer 都能运行。

关于低多边形风格

低多边形是渲染成本和包体体积都最低的风格。

平面着色：每个面一个法线，呈现清晰的多面体效果，不需要法线贴图。
颜色存储在顶点色（glTF COLOR_0）中：没有贴图、无需处理 UV，几乎不占显存。
树叶是实体几何，而不是 Alpha 面片：没有 Alpha 测试和透明 overdraw，这对移动 GPU 很重要。
场景中所有模型可以共用一个材质，树木很容易合批和实例化。
LOD0 的常见预算从几百到两千左右个三角形。

适合移动端、WebGL/WebGPU、VR、策略、城市建造和风格化独立游戏。在引擎中请使用会乘以顶点色的材质。

在three.js中使用

在 three.js 中，用 three/addons 里的 GLTFLoader 加载 GLB；只有当文件使用相应扩展时才需要 DRACOLoader 或 KTX2Loader。

距离 LOD：使用 THREE.LOD，通过 lod.addLevel(mesh, distance) 添加 LOD0–LOD3，每帧根据与相机的距离切换级别。
森林：InstancedMesh 一次 Draw Call 即可绘制成千上万个副本，BatchedMesh 可混合多种树木变体。THREE.LOD 不会作用于单个实例，需要自己按区块将实例按 LOD 分组。
树叶：glTF 的 alphaMode MASK 会转换为 material.alphaTest，双面材质会自动设置 side: THREE.DoubleSide。
碰撞网格：设为不可见，并交给 Rapier 或 cannon-es 等物理库使用。