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 Component --> | |
<a-entity id="snowflakes"></a-entity> | |
<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' }); | |
// Set initial position | |
this.el.object3D.position.set( | |
(Math.random() - 0.5) * 20, | |
5 + Math.random() * 5, | |
(Math.random() - 0.5) * 20 | |
); | |
// 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) { | |
this.el.parentNode.removeChild(this.el); // Remove snowflake when it hits the ground | |
} | |
} | |
}); | |
// Generate snowflakes | |
setInterval(() => { | |
let sceneEl = document.querySelector('a-scene'); | |
let snowflakeEl = document.createElement('a-entity'); | |
snowflakeEl.setAttribute('snowflake', ''); | |
sceneEl.appendChild(snowflakeEl); | |
}, 100); | |
</script> | |
</body> | |
</html> |