<html>
  <head>
    <meta charset="UTF-8">
    <title>Mushroom Scene v3</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script>
      function randomBetween(min, max) {
        return Math.random() * (max - min) + min;
      }

      function createMushrooms() {
        for (let i = 0; i < 20; i++) {
          const posX = randomBetween(-10, 10);
          const posY = randomBetween(0.2, 0.5);
          const posZ = randomBetween(-10, 10);
          const stemHeight = randomBetween(0.4, 1);
          const capRadius = randomBetween(0.2, 0.6);

          const mushroom = document.createElement('a-entity');
          mushroom.setAttribute('position', `${posX} ${posY} ${posZ}`);

          const stem = document.createElement('a-cylinder');
          stem.setAttribute('position', `0 ${stemHeight / 2} 0`);
          stem.setAttribute('radius', '0.1');
          stem.setAttribute('height', `${stemHeight}`);
          stem.setAttribute('color', '#BF9D6C');

          const cap = document.createElement('a-cone');
          cap.setAttribute('position', `0 ${(stemHeight * 0.8) + capRadius / 2} 0`);
          cap.setAttribute('radius-bottom', `${capRadius}`);
          cap.setAttribute('radius-top', '0.05');
          cap.setAttribute('height', `${capRadius * 0.6}`);
          cap.setAttribute('color', `hsl(${randomBetween(0, 360)}, 100%, 50%)`);

          mushroom.appendChild(stem);
          mushroom.appendChild(cap);

          const scene = document.querySelector('a-scene');
          scene.appendChild(mushroom);
        }
      }
    </script>
  </head>
  <body onload="createMushrooms()">
    <a-scene>
      <!-- Sky -->
      <a-sky color="#8CE6F0"></a-sky>
      
      <!-- Ground -->
      <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
      
      <!-- Camera -->
      <a-entity position="0 1.6 0">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.