Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Recursive Polygons in 3D with Snowflakes</title> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> | |
| <style> | |
| #canvas { | |
| height: 500px; | |
| width: 800px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <a-entity environment="preset: forest"></a-entity> | |
| <!-- Existing Recursive Polygon Component --> | |
| <!-- ... Your existing entities ... --> | |
| <!-- Snowflakes Components --> | |
| <!-- Clouds will be added dynamically --> | |
| <a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity> | |
| </a-scene> | |
| <script> | |
| AFRAME.registerComponent('snowflake', { | |
| init: function() { | |
| this.el.setAttribute('geometry', { | |
| primitive: 'sphere', | |
| radius: 0.05 | |
| }); | |
| 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, | |
| Math.random() - 0.5 | |
| ); | |
| // Set velocity | |
| this.velocity = new THREE.Vector3(0, -0.05, 0); | |
| }, | |
| 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 | |
| } | |
| } | |
| }); | |
| function createSnowflakeCloud(x, y, z) { | |
| 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); | |
| document.querySelector('a-scene').appendChild(cloud); | |
| } | |
| // 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); | |
| } | |
| } | |
| // Create a larger central cloud | |
| createSnowflakeCloud(0, 8, 0); | |
| </script> | |
| </body> | |
| </html> | |