Three.js 合并网格/几何对象答案

【问题标题】：Three.js merging mesh/geometry objectsThree.js 合并网格/几何对象
【发布时间】：2018-06-11 13:11:58
【问题描述】：

我正在创建一个 three.js 应用程序，它由地板（由不同的瓷砖组成）和搁架单元（超过 5000 个......）组成。我遇到了一些性能问题和低 FPS（低于 20），我认为这是因为我为每个瓷砖和搁架单元创建了一个单独的网格。我知道我可以利用几何/网格合并来提高性能。这是渲染地板和搁架单元（单元格）的代码：

// add ground tiles
const tileGeometry = new THREE.PlaneBufferGeometry(
  1,
  1,
  1
);
const edgeGeometry = new THREE.EdgesGeometry(tileGeometry);
const edges = new THREE.LineSegments(edgeGeometry, edgeMaterial);
let initialMesh = new THREE.Mesh(tileGeometry, floorMat);    

Object.keys(groundTiles).forEach((key, index) => {
  let tile = groundTiles[key];
  let tileMesh = initialMesh.clone();

  tileMesh.position.set(
    tile.leftPoint[0] + tile.size[0] / 2,
    tile.leftPoint[1] + tile.size[1] / 2,
    0
  );

  tileMesh.scale.x = tile.size[0];
  tileMesh.scale.y = tile.size[1];
  tileMesh.name = `${tile.leftPoint[0]}-${tile.leftPoint[1]}`;

  // Add tile edges (adds tile border lines)
  tileMesh.add(edges.clone());
  scene.add(tileMesh);
});

// add shelving units
const cellGeometry = new THREE.BoxBufferGeometry( 790, 790, 250 );
const  wireframe = new THREE.WireframeGeometry( cellGeometry );
const cellLine = new THREE.LineSegments(wireframe, shelves_material);

Object.keys(cells).forEach((key, index) => {
  let cell = cells[key];
  const cellMesh = cellLine.clone();
  cellMesh.position.set(
    cell["x"] + 790 / 2,
    // cell["x"],
    cell["y"] + 490 / 2,
    cell["z"] - 250
  );
  scene.add(cellMesh);
});

另外，这是一个link 对最终结果的截图。

我看到this关于几何合并的文章，但由于我正在使用边缘、线段和线框对象，我不知道如何在我的案例中实现它。

如有任何帮助，将不胜感激

【问题讨论】：

您不能将线与网格合并，因为它们是不同的基元。我建议您开始合并网格，如下例所示：threejs.org/examples/webgl_geometry_minecraft.html
@Mugen87 谢谢。从示例中我看到他使用 THREE.BufferGeometryUtils 来合并平面缓冲区几何图形，这是我用来绘制瓷砖的，但我看不到如何将它与边缘结合起来（为了创建一种网格..)

标签： performance three.js

【解决方案1】：

考虑到@Mugen87 的评论，这是一种可能的方法：

非常简单的平面合并
使用着色器材质绘制“边框”

注意：注释掉discard; 行，用红色或任何你可能想要的材料填充卡片。

JsFiddle demo

【讨论】：

谢谢，你的例子很有帮助。根本不知道着色器材质