Three.js 低多边形 GLB 模型

Three.js 围绕 GLB 构建，而自包含的 GLB 正是交给它的理想素材。GLB 把几何体、材质和贴图打包进单个二进制文件，因此一次取回就把 Three.js 所需的一切都给到，无需管理分散的贴图请求。你用 GLTFLoader 加载它，它会解析文件并返回一个可直接加入 Three.js 场景的 gltf.scene 对象。由于 GLB 是官方的 glTF 运行时格式，而 Three.js 是 glTF 查看器的参考实现，导入可靠，材质、节点名称和层级都会原样传入。

在 GLTFLoader 上加入 DRACOLoader 是 Three.js 低多边形 GLB 的标准性能步骤。当 GLB 以 Draco 压缩导出时，几何体被编码使文件大幅变小，DRACOLoader 在加载时用 worker 解码，因此主线程保持响应。设置只需几行：创建一个 DRACOLoader，指向解码器路径，并在加载器上调用 gltfLoader.setDRACOLoader。对于贴图，加入 KTX2Loader 让压缩贴图在 GPU 上保持压缩。接好 Draco 和 KTX2 后，低多边形模型加载快、占用内存少，这正是网页的关键所在。

加载之后，GLB 成为 Three.js 场景图的一部分，理解这一结构正是你掌控模型的关键。gltf.scene 是一个 Group，其内部每个网格都是带有自身几何体、材质和变换的 Mesh 节点，按原始层级嵌套。你可以用 traverse 方法遍历场景，按名称查找网格、替换材质、切换可见性，或把模型附加到另一物体上让它随之移动。轴心与父子关系在往返中得以保留，因此低多边形炮塔能在底座上旋转、角色能携带物品，一切都可通过节点树寻址。

GLB 上的材质默认导入为 MeshStandardMaterial，这是 Three.js 用于真实光照的基于物理的材质，对低多边形也很好用。低多边形网格的平整面能干净地接收标准材质光照，你可以把金属度调到接近零、粗糙度调高以获得柔和哑光，或指定 MeshBasicMaterial 获得几乎零渲染成本的完全扁平无光照风格。一张共享的平涂颜色图集，道具用 512 到 1024 像素、主角最多 2048 像素，能让材质数量和绘制调用都很低。由于贴图是纯色，它压缩紧凑且在任何缩放下都清晰。

Three.js 的性能来自少绘制、多复用，而低多边形素材加实例化是绝配。当你需要同一道具的多个副本时，InstancedMesh 用一次调用绘制全部，而非每个物体一次调用，这把一片低多边形树林变成一次廉价绘制。在实例间共享一个材质和一个几何体，把面数保持在 1,000 到 10,000 三角面的网页区间，并用 LOD 对象制作 LOD，让远处模型切换为更简单的网格。再配合 Draco 压缩的 GLB 和共享图集，由生成式低多边形模型构建的 Three.js 场景即便在移动端也能保持流畅帧率。

若追求最简单的交付，model-viewer 网页组件用一个 HTML 标签即可加载 GLB，并免费提供轨道控制、AR 和懒加载，非常适合产品页或快速嵌入。若需完全控制，则如上所述直接用 GLTFLoader 和 DRACOLoader 编写 Three.js。无论哪种方式，你生成的素材都是 AI 创建且完全归你所有、可用于商业网站和应用、无需署名，因此你可以用自包含的低多边形 GLB 模型完整构建配置器、游戏或展示，管线干净、快速、免版税。