Update index.html

index.html

@@ -23,44 +23,56 @@
     <!-- Clouds will be added dynamically -->
 
     <a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity>
+    <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#FFF"></a-plane>
   </a-scene>
 
   <script>
     AFRAME.registerComponent('snowflake', {
+      schema: {
+        size: { type: 'number', default: 0.1 }
+      },
       init: function() {
+        let size = this.data.size;
+
         this.el.setAttribute('geometry', {
           primitive: 'sphere',
-          radius: 0.05
+          radius: size
         });
         this.el.setAttribute('material', { color: '#FFF' });
 
-        // Randomly position within a unit cube centered at the origin
         this.el.object3D.position.set(
           Math.random() - 0.5,
-          Math.random() - 0.5,
+          0,
           Math.random() - 0.5
         );
 
-        // Set velocity
-        this.velocity = new THREE.Vector3(0, -0.05, 0);
+        this.velocity = new THREE.Vector3(
+          (Math.random() - 0.5) * 0.01, // Random wind effect
+          -0.01, // Falling speed
+          (Math.random() - 0.5) * 0.01  // Random wind effect
+        );
       },
       tick: function() {
         this.el.object3D.position.add(this.velocity);
         if (this.el.object3D.position.y <= -0.5) {
-          this.el.parentNode.removeChild(this.el); // Remove snowflake when it falls out of the cloud
+          this.el.object3D.position.y = -0.5; // Accumulate on the ground
+          this.velocity.set(0, 0, 0); // Stop movement when it hits the ground
         }
       }
     });
 
-    function createSnowflakeCloud(x, y, z) {
+    function createSnowflakeCloud(x, y, z, numParticles) {
       let cloud = document.createElement('a-entity');
       cloud.object3D.position.set(x, y, z);
 
-      setInterval(() => {
-        let snowflakeEl = document.createElement('a-entity');
-        snowflakeEl.setAttribute('snowflake', '');
-        cloud.appendChild(snowflakeEl);
-      }, 100);
+      for (let i = 0; i < numParticles; i++) {
+        let size = Math.random() * 0.1 + 0.05; // Random size between 0.05 and 0.15
+        setTimeout(() => {
+          let snowflakeEl = document.createElement('a-entity');
+          snowflakeEl.setAttribute('snowflake', 'size', size);
+          cloud.appendChild(snowflakeEl);
+        }, i * 100);
+      }
 
       document.querySelector('a-scene').appendChild(cloud);
     }
@@ -68,13 +80,12 @@
     // Create a grid of 9 snowflake clouds
     for (let x = -10; x <= 10; x += 10) {
       for (let z = -10; z <= 10; z += 10) {
-        createSnowflakeCloud(x, 5, z);
+        createSnowflakeCloud(x, 5, z, 50); // Increase the number of particles per cloud
       }
     }
 
     // Create a larger central cloud
-    createSnowflakeCloud(0, 8, 0);
-
+    createSnowflakeCloud(0, 8, 0, 100);
   </script>
 </body>
-</html>
+</html>