Question

我正在创建一个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文章，但由于我正在使用的边缘，线段和线框对象，我不知道如何在我的情况下实现它。

任何帮助都是适当的

Answer 1

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

非常简单的合并飞机
使用着色器材质绘制＆＃34; border＆＃34;

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

JsFiddle demo

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

1 个答案: