Я создаю приложение 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);
});
Также здесь есть ссылка на скриншот с окончательным результатом.
Я видел эту статью, касающуюся слияния геометрий, но я не знаю, как реализовать ее в моем случае из-за используемых ребер, сегментов линий и каркасных объектов ..
Любая помощь будет оценена