Update index.html

index.html

@@ -29,7 +29,8 @@
   <script>
     AFRAME.registerComponent('snowflake', {
       schema: {
-        size: { type: 'number', default: 0.1 }
+        size: { type: 'number', default: 0.1 },
+        meltTime: { type: 'number', default: 10000 }
       },
       init: function() {
         let size = this.data.size;
@@ -40,17 +41,25 @@
         });
         this.el.setAttribute('material', { color: '#FFF' });
 
-        this.el.object3D.position.set(
-          Math.random() - 0.5,
-          0,
-          Math.random() - 0.5
-        );
+        this.resetPosition();
 
         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
         );
+
+        // Set timer for melting or landing
+        setTimeout(() => {
+          this.resetPosition();
+        }, Math.random() * this.data.meltTime);
+      },
+      resetPosition: function() {
+        this.el.object3D.position.set(
+          Math.random() * 20 - 10,
+          5 + Math.random() * 5,
+          Math.random() * 20 - 10
+        );
       },
       tick: function() {
         this.el.object3D.position.add(this.velocity);
@@ -67,9 +76,10 @@
 
       for (let i = 0; i < numParticles; i++) {
         let size = Math.random() * 0.1 + 0.05; // Random size between 0.05 and 0.15
+        let meltTime = Math.random() * 20000 + 5000; // Random time between 5 and 25 seconds
         setTimeout(() => {
           let snowflakeEl = document.createElement('a-entity');
-          snowflakeEl.setAttribute('snowflake', 'size', size);
+          snowflakeEl.setAttribute('snowflake', {size: size, meltTime: meltTime});
           cloud.appendChild(snowflakeEl);
         }, i * 100);
       }