index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity sound="src: #background-music; autoplay: true; loop: true"></a-entity>
      <a-entity gltf-model="#my-model" position="-47 0 23" scale="0.92 0.92 0.92" rotation="0 213 0"></a-entity>
      <a-entity gltf-model="#my-model" position="35 0 -12" scale="1.15 1.15 1.15" rotation="0 78 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-18 0 -39" scale="0.88 0.88 0.88" rotation="0 302 0"></a-entity>
      <a-entity gltf-model="#my-model" position="9 0 41" scale="1.22 1.22 1.22" rotation="0 145 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-31 0 -7" scale="1.05 1.05 1.05" rotation="0 267 0"></a-entity>
      <a-entity gltf-model="#my-model" position="22 0 29" scale="0.97 0.97 0.97" rotation="0 34 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-5 0 -25" scale="1.18 1.18 1.18" rotation="0 189 0"></a-entity>
      <a-entity gltf-model="#my-model" position="43 0 6" scale="0.83 0.83 0.83" rotation="0 123 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-39 0 33" scale="1.09 1.09 1.09" rotation="0 278 0"></a-entity>
      <a-entity gltf-model="#my-model" position="16 0 -44" scale="0.95 0.95 0.95" rotation="0 56 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-24 0 11" scale="1.24 1.24 1.24" rotation="0 201 0"></a-entity>
      <a-entity gltf-model="#my-model" position="29 0 -19" scale="0.86 0.86 0.86" rotation="0 89 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-12 0 37" scale="1.13 1.13 1.13" rotation="0 312 0"></a-entity>
      <a-entity gltf-model="#my-model" position="48 0 -2" scale="0.91 0.91 0.91" rotation="0 167 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-36 0 -31" scale="1.19 1.19 1.19" rotation="0 245 0"></a-entity>
      <a-entity gltf-model="#my-model" position="3 0 26" scale="0.84 0.84 0.84" rotation="0 23 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-45 0 -14" scale="1.07 1.07 1.07" rotation="0 178 0"></a-entity>
      <a-entity gltf-model="#my-model" position="39 0 45" scale="0.93 0.93 0.93" rotation="0 101 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-8 0 -37" scale="1.21 1.21 1.21" rotation="0 289 0"></a-entity>
      <a-entity gltf-model="#my-model" position="25 0 8" scale="0.89 0.89 0.89" rotation="0 45 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-29 0 -22" scale="1.16 1.16 1.16" rotation="0 234 0"></a-entity>
      <a-entity gltf-model="#my-model" position="13 0 39" scale="0.87 0.87 0.87" rotation="0 67 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-42 0 4" scale="1.11 1.11 1.11" rotation="0 301 0"></a-entity>
      <a-entity gltf-model="#my-model" position="32 0 -28" scale="0.96 0.96 0.96" rotation="0 156 0"></a-entity>
      <a-entity gltf-model="#my-model" position="-15 0 20" scale="1.23 1.23 1.23" rotation="0 223 0"></a-entity>
      <a-entity environment="preset: contact; 
         lighting: studio; 
         shadow: true; 
         fog: 0.8; 
         ground: hills"></a-entity>

      <a-assets>
        <a-asset-item id="my-model" src="model.glb"></a-asset-item>
        <audio id="background-music" src="WtJW.mp3"></audio>
      </a-assets>
    </a-scene>
    <script src="script.js"></script>
  </body>
</html>