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