Three.js-如何将多个导入的模型组合在一起

Question

我正在尝试减少THREE.js场景中的调用次数。我有一个很大的32x32瓦片，它们是从磁盘导入的.gtlf模型。一些网格图块会得到一个模型（只有8个顶点和一个纹理）。但是，使用Spector之类的第三方工具检查此画布后，发现有151个绘制调用，并且似乎每个模型都是单独绘制的。

通过在每个图块之间遍历网格来创建它们，查看该图块是否需要模型，如果需要，则从使用THREE.GLTFLoader加载的Map中获取模型数据。有时（但很少），材料会发生变化，旋转也会发生变化，但仅限于安装过程中。

这些图块将永远不需要移动或更改其变换。它们将是静态的。我可以执行某种优化以将这些图块的渲染分组为尽可能少的绘制调用，因为它们实际上是同一对象？

Answer 1

您可以将图块合并为一个几何。

与此类似的事物

const mergedGeom = new THREE.BufferGeometry()
tiles.forEach( tile=>{
  const geom = tile.geometry.clone()
  geom.applyMatrix(tile.matrixWorld)
  mergedGeom.merge(geom)
}

如果您确实有许多不同的材质和纹理，则必须以某种方式进行管理。