Update index.html
Browse files- index.html +15 -11
index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
| 5 |
-
<title>Recursive Polygons in 3D with Snowflakes</title>
|
| 6 |
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 7 |
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
|
| 8 |
<style>
|
|
@@ -42,17 +42,15 @@
|
|
| 42 |
this.el.setAttribute('material', { color: '#FFF' });
|
| 43 |
|
| 44 |
this.resetPosition();
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
(Math.random() - 0.5) * 0.01 // Random wind effect
|
| 50 |
-
);
|
| 51 |
-
|
| 52 |
-
// Set timer for melting or landing
|
| 53 |
-
setTimeout(() => {
|
| 54 |
this.resetPosition();
|
| 55 |
-
|
|
|
|
|
|
|
|
|
|
| 56 |
},
|
| 57 |
resetPosition: function() {
|
| 58 |
this.el.object3D.position.set(
|
|
@@ -60,6 +58,12 @@
|
|
| 60 |
5 + Math.random() * 5,
|
| 61 |
Math.random() * 20 - 10
|
| 62 |
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
},
|
| 64 |
tick: function() {
|
| 65 |
this.el.object3D.position.add(this.velocity);
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
| 5 |
+
<title>Recursive Polygons in 3D with Continuous Snowflakes</title>
|
| 6 |
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 7 |
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
|
| 8 |
<style>
|
|
|
|
| 42 |
this.el.setAttribute('material', { color: '#FFF' });
|
| 43 |
|
| 44 |
this.resetPosition();
|
| 45 |
+
this.startMeltingLoop();
|
| 46 |
+
},
|
| 47 |
+
startMeltingLoop: function() {
|
| 48 |
+
const resetAndStartAgain = () => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
this.resetPosition();
|
| 50 |
+
setTimeout(resetAndStartAgain, Math.random() * this.data.meltTime + 5000);
|
| 51 |
+
};
|
| 52 |
+
|
| 53 |
+
setTimeout(resetAndStartAgain, Math.random() * this.data.meltTime + 5000);
|
| 54 |
},
|
| 55 |
resetPosition: function() {
|
| 56 |
this.el.object3D.position.set(
|
|
|
|
| 58 |
5 + Math.random() * 5,
|
| 59 |
Math.random() * 20 - 10
|
| 60 |
);
|
| 61 |
+
|
| 62 |
+
this.velocity = new THREE.Vector3(
|
| 63 |
+
(Math.random() - 0.5) * 0.01, // Random wind effect
|
| 64 |
+
-0.01, // Falling speed
|
| 65 |
+
(Math.random() - 0.5) * 0.01 // Random wind effect
|
| 66 |
+
);
|
| 67 |
},
|
| 68 |
tick: function() {
|
| 69 |
this.el.object3D.position.add(this.velocity);
|