Optimizing Multi-Floor Building Performance in Three.js

Based on your code, there are several optimization strategies you can implement to improve performance when rendering multiple floors of your building:

1. Use InstancedMesh Instead of Cloning

The most significant performance improvement would come from using InstancedMesh instead of creating multiple clones. This is specifically designed for scenarios where you need many instances of the same geometry:

JAVASCRIPTCopied
async function optimizeBuilding() {
    try {
        const gltf_1 = await load_gltf('/assets/bulding.glb');
        
        // Extract meshes
        const flor = gltf_1.getObjectByName("flor");
        const corridor = gltf_1.getObjectByName("corridor");
        
        // Create a single floor group
        const floorGroup = new THREE.Group();
        
        // Create floor variations
        const flor_1 = flor.clone();
        flor_1.rotation.set(0, Math.PI, 0);
        const flor_2 = flor.clone();
        flor_2.scale.x = -1;
        const flor_3 = flor.clone();
        flor_3.scale.z = -1;
        
        // Add all parts to the floor group
        floorGroup.add(flor, flor_1, flor_2, flor_3, corridor);
        
        // Create instanced mesh for the floor group
        // First, convert the group to a single mesh if possible
        const floorGeometry = mergeGeometries(floorGroup);
        const floorMaterial = flor.material.clone();
        
        // Create instanced mesh with 13 instances (ground floor + 12 additional floors)
        const instancedFloor = new THREE.InstancedMesh(
            floorGeometry,
            floorMaterial,
            13
        );
        
        // Set positions for each instance
        const matrix = new THREE.Matrix4();
        for (let i = 0; i < 13; i++) {
            matrix.setPosition(0, i * 2.5, 0);
            instancedFloor.setMatrixAt(i, matrix);
        }
        
        scene.add(instancedFloor);
        
    } catch (error) {
        console.error('Error loading GLTF:', error);
    }
}

2. Use BatchedMesh for Static Elements

If your floors don't need to move independently after creation, consider using BatchedMesh which is optimized for static geometry:

JAVASCRIPTCopied
// Create a BatchedMesh for all floors
const batchedMesh = new THREE.BatchedMesh(
    floorGeometry,
    floorMaterial,
    13 // Number of floors
);

// Set positions for each batch
for (let i = 0; i < 13; i++) {
    const matrix = new THREE.Matrix4();
    matrix.setPosition(0, i * 2.5, 0);
    batchedMesh.setMatrixAt(i, matrix);
}

scene.add(batchedMesh);

3. Optimize the Original Model

• Reduce polygon count in your original GLB file
• Optimize textures (reduce size, use mipmaps)
• Use simpler materials where possible

4. Level of Detail (LOD)

Implement LOD for floors that are far from the camera:

JAVASCRIPTCopied
const lod = new THREE.LOD();

// High detail for close viewing
lod.addLevel(highDetailFloor, 0);

// Medium detail
lod.addLevel(mediumDetailFloor, 10);

// Low detail for distant floors
lod.addLevel(lowDetailFloor, 50);

// Add LOD to each floor position
for (let i = 0; i < 13; i++) {
    const floorLOD = lod.clone();
    floorLOD.position.set(0, i * 2.5, 0);
    scene.add(floorLOD);
}

5. Frustum Culling and Object Pooling

Ensure that floors outside the camera view aren't being rendered:

JAVASCRIPTCopied
// In your animation loop
function animate() {
    // Update which floors are visible based on camera position
    for (let i = 0; i < floors.length; i++) {
        const floor = floors[i];
        const distance = camera.position.distanceTo(floor.position);
        
        // Only render floors within a certain distance
        floor.visible = distance < maxRenderDistance;
    }
    
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

By implementing these optimizations, particularly the switch to InstancedMesh or BatchedMesh, you should see a significant performance improvement in your multi-floor building scene.