|
<!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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity> |
|
<a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#FFF"></a-plane> |
|
</a-scene> |
|
|
|
<script> |
|
AFRAME.registerComponent('snowflake', { |
|
schema: { |
|
size: { type: 'number', default: 0.1 } |
|
}, |
|
init: function() { |
|
let size = this.data.size; |
|
|
|
this.el.setAttribute('geometry', { |
|
primitive: 'sphere', |
|
radius: size |
|
}); |
|
this.el.setAttribute('material', { color: '#FFF' }); |
|
|
|
this.el.object3D.position.set( |
|
Math.random() - 0.5, |
|
0, |
|
Math.random() - 0.5 |
|
); |
|
|
|
this.velocity = new THREE.Vector3( |
|
(Math.random() - 0.5) * 0.01, |
|
-0.01, |
|
(Math.random() - 0.5) * 0.01 |
|
); |
|
}, |
|
tick: function() { |
|
this.el.object3D.position.add(this.velocity); |
|
if (this.el.object3D.position.y <= -0.5) { |
|
this.el.object3D.position.y = -0.5; |
|
this.velocity.set(0, 0, 0); |
|
} |
|
} |
|
}); |
|
|
|
function createSnowflakeCloud(x, y, z, numParticles) { |
|
let cloud = document.createElement('a-entity'); |
|
cloud.object3D.position.set(x, y, z); |
|
|
|
for (let i = 0; i < numParticles; i++) { |
|
let size = Math.random() * 0.1 + 0.05; |
|
setTimeout(() => { |
|
let snowflakeEl = document.createElement('a-entity'); |
|
snowflakeEl.setAttribute('snowflake', 'size', size); |
|
cloud.appendChild(snowflakeEl); |
|
}, i * 100); |
|
} |
|
|
|
document.querySelector('a-scene').appendChild(cloud); |
|
} |
|
|
|
|
|
for (let x = -10; x <= 10; x += 10) { |
|
for (let z = -10; z <= 10; z += 10) { |
|
createSnowflakeCloud(x, 5, z, 50); |
|
} |
|
} |
|
|
|
|
|
createSnowflakeCloud(0, 8, 0, 100); |
|
</script> |
|
</body> |
|
</html> |
|
|
