File size: 1,806 Bytes
abe3137 070f7ee abe3137 070f7ee abe3137 070f7ee abe3137 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html>
<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> |