Building layout of the warehouse using react three fiber, while building 1/10 project it started freezing

I am trying to create 3D layout of the warehouse but even I build little part of the project it started freezing in first person movemenent . So I am wonder is that possible to create such a project in R3F or am I not using correct strcuture.

I will provide my some codes.

const generateBoxPositions = () => {
  const positions = [];
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      positions.push([-4 + j * 2, i * 1.5 + 0.5, 0]); // Adjust position
    }
  }
  return positions;
};

const Box = ({ position }) => (
  <mesh position={position}>
    <boxGeometry args={[1.5, 1, 1]} />
    <meshStandardMaterial color="brown" />
  </mesh>
);
const Shelf = ({ position, color }) => (
  <group position={position}>
    <group>
      {[...Array(5)].map((_, i) => (
        <mesh key={i} position={[0, i * 1.5, 0]}>
          <boxGeometry args={[10, 0.1, 2]} />
          <meshStandardMaterial color={color} />
        </mesh>
      ))}
      {[...Array(2)].map((_, i) => (
        <mesh key={i} position={[i === 0 ? -4.8 : 4.8, 3, 0]}>
          <boxGeometry args={[0.2, 7, 2]} />
          <meshStandardMaterial color={color} />
        </mesh>
      ))}
    </group>
    {generateBoxPositions().map((pos, index) => (
      <Box key={index} position={pos} />
    ))}
  </group>
);

export default Shelf;

And I am using this generic shelf in this component

import Shelf from "../Shelf";

export default function Row({ position, color }) {
  return (
    <group position={position}>
      <Shelf position={[0, 0, 0]} color={color} />
      <Shelf position={[0, 0, 2.1]} color={color} />
    </group>
  );
}

And when I finish one row of shelves I am creating rows for one zone

import React from "react";
import Shelf from "../../Generic/Shelf";
import Row from "../../Generic/Row";

export default function S112() {
  return (
    <group>
      <group position={[0, 0, 0]}>
        <Row position={[0, 0, 0]} color={"grey"} />
        <Row position={[0, 0, 8]} color={"grey"} />
        <Row position={[0, 0, 16]} color={"grey"} />
        <Row position={[0, 0, 24]} color={"grey"} />
        <Row position={[0, 0, 32]} color={"grey"} />
        <Row position={[0, 0, 40]} color={"grey"} />
        <Row position={[0, 0, 48]} color={"grey"} />
        <Row position={[0, 0, 56]} color={"grey"} />
        <Row position={[0, 0, 64]} color={"grey"} />
        <Row position={[0, 0, 72]} color={"grey"} />
        <Row position={[0, 0, 80]} color={"grey"} />
        <Row position={[0, 0, 88]} color={"grey"} />
        <Row position={[0, 0, 96]} color={"grey"} />
      </group>
      <group position={[30, 0, 0]}>
        <Row position={[0, 0, 0]} color={"grey"} />
        <Row position={[0, 0, 8]} color={"grey"} />
        <Row position={[0, 0, 16]} color={"grey"} />
        <Row position={[0, 0, 24]} color={"grey"} />
        <Row position={[0, 0, 32]} color={"grey"} />
        <Row position={[0, 0, 40]} color={"grey"} />
        <Row position={[0, 0, 48]} color={"grey"} />
        <Row position={[0, 0, 56]} color={"grey"} />
        <Row position={[0, 0, 64]} color={"grey"} />
        <Row position={[0, 0, 72]} color={"grey"} />
        <Row position={[0, 0, 80]} color={"grey"} />
        <Row position={[0, 0, 88]} color={"grey"} />
        <Row position={[0, 0, 96]} color={"grey"} />
      </group>
      <group position={[45, 0, 0]}>
        <Row position={[0, 0, 0]} color={"grey"} />
        <Row position={[0, 0, 8]} color={"grey"} />
        <Row position={[0, 0, 16]} color={"grey"} />
        <Row position={[0, 0, 24]} color={"grey"} />
        <Row position={[0, 0, 32]} color={"grey"} />
        <Row position={[0, 0, 40]} color={"grey"} />
        <Row position={[0, 0, 48]} color={"grey"} />
        <Row position={[0, 0, 56]} color={"grey"} />
        <Row position={[0, 0, 64]} color={"grey"} />
        <Row position={[0, 0, 72]} color={"grey"} />
        <Row position={[0, 0, 80]} color={"grey"} />
        <Row position={[0, 0, 88]} color={"grey"} />
        <Row position={[0, 0, 96]} color={"grey"} />
      </group>
      <group position={[70, 0, 0]}>
        <Row position={[0, 0, 0]} color={"grey"} />
        <Row position={[0, 0, 8]} color={"grey"} />
        <Row position={[0, 0, 16]} color={"grey"} />
        <Row position={[0, 0, 24]} color={"grey"} />
        <Row position={[0, 0, 32]} color={"grey"} />
        <Row position={[0, 0, 40]} color={"grey"} />
        <Row position={[0, 0, 48]} color={"grey"} />
        <Row position={[0, 0, 56]} color={"grey"} />
        <Row position={[0, 0, 64]} color={"grey"} />
        <Row position={[0, 0, 72]} color={"grey"} />
        <Row position={[0, 0, 80]} color={"grey"} />
        <Row position={[0, 0, 88]} color={"grey"} />
        <Row position={[0, 0, 96]} color={"grey"} />
      </group>
      <group position={[85, 0, 0]}>
        <Row position={[0, 0, 0]} color={"grey"} />
        <Row position={[0, 0, 8]} color={"grey"} />
        <Row position={[0, 0, 16]} color={"grey"} />
        <Row position={[0, 0, 24]} color={"grey"} />
        <Row position={[0, 0, 32]} color={"grey"} />
        <Row position={[0, 0, 40]} color={"grey"} />
        <Row position={[0, 0, 48]} color={"grey"} />
        <Row position={[0, 0, 56]} color={"grey"} />
        <Row position={[0, 0, 64]} color={"grey"} />
        <Row position={[0, 0, 72]} color={"grey"} />
        <Row position={[0, 0, 80]} color={"grey"} />
        <Row position={[0, 0, 88]} color={"grey"} />
        <Row position={[0, 0, 96]} color={"grey"} />
      </group>
    </group>
  );
}

I have more than 10 zones for that reason , I need some way of creating objects

I tried to use InstancedMesh for reducing the freezing because of object amount but anyway I got this freezing in my app

Solution

As usual, the trick to making something faster is making it do less work.

An example that renders 20 copies of <S112> renders much faster with a couple of changes:

You call generateBoxPositions() again for every render of Shelf – memoize the result (or assign it to a global, as below). Similarly, instead of new Array(5) for an array of 5 things, just write it out...
Compute the shelf and box geometries, as well as the materials only once and reuse them. (See the docs.) This saves a lot on WebGL draw calls.
Use drei's <Instances> and <Instance> to render the repeated boxes on each shelf to coalesce them into a single draw call too.

function generateBoxPositions() {
  const positions: [number, number, number][] = [];
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      positions.push([-4 + j * 2, i * 1.5 + 0.5, 0]); // Adjust position
    }
  }
  return positions;
}

const boxPositions = generateBoxPositions();

const materialsByColor = {};
function getMaterialWithColor(color) {
  if (!materialsByColor[color]) {
    materialsByColor[color] = new THREE.MeshStandardMaterial({ color });
  }
  return materialsByColor[color];
}

const brownMaterial = getMaterialWithColor("brown");
const itemBoxGeometry = new THREE.BoxGeometry(1.5, 1, 1);
const shelfLongGeometry = new THREE.BoxGeometry(10, 0.1, 2);
const shelfEndGeometry = new THREE.BoxGeometry(0.2, 7, 2);

function Shelf({ position, color }) {
  const shelfMat = getMaterialWithColor(color);
  return (
    <group position={position}>
      {[0, 1, 2, 3, 4].map((i) => (
        <mesh
          key={i}
          position={[0, i * 1.5, 0]}
          material={shelfMat}
          geometry={shelfLongGeometry}
        />
      ))}
      {[0, 1].map((i) => (
        <mesh
          key={i}
          position={[i === 0 ? -4.8 : 4.8, 3, 0]}
          material={shelfMat}
          geometry={shelfEndGeometry}
        />
      ))}
      <Instances geometry={itemBoxGeometry} material={brownMaterial}>
        {boxPositions.map((pos, index) => (
          <Instance key={index} position={pos} />
        ))}
      </Instances>
    </group>
  );
}