<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Warehouse with Rows of Racks and Tiled Floor</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Lighting -->
      <a-light type="directional" intensity="1" position="10 10 -10"></a-light>
      <a-light type="ambient" intensity="1"></a-light>

      <!-- Assets -->
      <a-assets>
        <!-- Textures -->
        <img id="ceiling-texture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFrgU7ElT-9MPJFICjcYHgnSP7Vo7xQxDiJg&s" crossorigin="anonymous">
        <img id="tile-texture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgd9Ri3hmt64LMl6hElpE_wAgCVcGNqLH4vw&s" crossorigin="anonymous">
        <img id="box-texture" src="https://i0.wp.com/picjumbo.com/wp-content/uploads/wood-working-repetitive-seamless-texture-free-photo.png?w=600&quality=80" crossorigin="anonymous">
        <img id="wall-texture" src="https://as2.ftcdn.net/v2/jpg/01/26/54/81/1000_F_126548175_TU7cJF4Ql43VzlVgMZcUOV689sv7Y48s.jpg" crossorigin="anonymous">
      </a-assets>

       <!-- Textured Ground (Tiled Floor) -->
       <a-plane 
       rotation="-90 0 0" 
       width="50" 
       height="50" 
       shadow="true" 
       material="src: #tile-texture; repeat: 10 10; roughness: 0.8; metalness: 0.2;">
     </a-plane>

      <!-- Designer Walls -->
      <a-plane 
        position="0 3 -25" 
        rotation="0 0 0" 
        width="50" 
        height="5" 
        shadow="true" 
        material="src: #wall-texture; repeat: 5 2;">
      </a-plane> <!-- Front wall -->
      <a-plane 
        position="0 3 25" 
        rotation="0 180 0" 
        width="50" 
        height="5" 
        shadow="true" 
        material="src: #wall-texture; repeat: 5 2;">
      </a-plane> <!-- Back wall -->
      <a-plane 
        position="-25 3 0" 
        rotation="0 90 0" 
        width="50" 
        height="5" 
        shadow="true" 
        material="src: #wall-texture; repeat: 5 2;">
      </a-plane> <!-- Left wall -->
      <a-plane 
        position="25 3 0" 
        rotation="0 -90 0" 
        width="50" 
        height="5" 
        shadow="true" 
        material="src: #wall-texture; repeat: 5 2;">
      </a-plane> <!-- Right wall -->
      <a-plane 
        position="0 5 0" 
        rotation="90 0 0" 
        width="50" 
        height="50" 
        shadow="true" 
        material="src: #ceiling-texture; repeat: 10 10; roughness: 0.9;">
      </a-plane>

      <!-- Rows of Racks with Reduced Spacing -->
      <!-- Row 1 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 0" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 0" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 0" rotation="0 180 0"></a-entity>

      <!-- Row 2 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 -10" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 -10" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 -10" rotation="0 180 0"></a-entity>

      <!-- Row 3 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 -20" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 -20" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 -20" rotation="0 180 0"></a-entity>

      <!-- Row 4 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 -30" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 -30" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 -30" rotation="0 180 0"></a-entity>

      <!-- Row 5 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 10" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 10" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 10" rotation="0 180 0"></a-entity>

      <!-- Row 6 -->
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="-10 0 20" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="5 0 20" rotation="0 180 0"></a-entity>
      <a-entity gltf-model="url(scene.gltf)" scale="0.04 0.04 0.04" position="20 0 20" rotation="0 180 0"></a-entity>

      <!-- Camera with Mouse Controls -->
      <a-camera position="0 1.6 50" look-controls="pointerLockEnabled: true"></a-camera>
    </a-scene>
  </body>
</html>
