1-FirstHTML5Space-AIPP-AR-VR / backup1.index.html
awacke1's picture
Create backup1.index.html
9a7645b verified
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Recursive Polygons in 3D with Continuous 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-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 },
meltTime: { type: 'number', default: 15000 }
},
init: function() {
let size = this.data.size;
this.el.setAttribute('geometry', {
primitive: 'sphere',
radius: size
});
this.el.setAttribute('material', { color: '#FFF' });
this.resetPosition();
this.startMeltingLoop();
},
startMeltingLoop: function() {
const resetAndStartAgain = () => {
this.resetPosition();
setTimeout(resetAndStartAgain, Math.random() * this.data.meltTime + 15000);
};
setTimeout(resetAndStartAgain, Math.random() * this.data.meltTime + 15000);
},
resetPosition: function() {
this.el.object3D.position.set(
Math.random() * 20 - 10,
5 + Math.random() * 5,
Math.random() * 20 - 10
);
this.velocity = new THREE.Vector3(
(Math.random() - 0.5) * 0.01, // Random wind effect
-0.02, // Falling speed
(Math.random() - 0.5) * 0.01 // Random wind effect
);
},
tick: function() {
this.el.object3D.position.add(this.velocity);
if (this.el.object3D.position.y <= -3.5) {
this.el.object3D.position.y = -3.5; // Accumulate on the ground
this.velocity.set(0, 0, 0); // Stop movement when it hits the ground
}
}
});
AFRAME.registerComponent('custom-controls', {
init: function () {
this.velocityY = 0;
this.isMovingUp = false;
window.addEventListener('keydown', (e) => {
if (e.key === 'q' || e.key === 'Q') {
this.isMovingUp = true;
}
if (e.key === 'e' || e.key === 'E') {
this.velocityY = 0; // Stop upward movement
}
});
window.addEventListener('keyup', (e) => {
if (e.key === 'q' || e.key === 'Q') {
this.isMovingUp = false;
}
});
},
tick: function () {
let position = this.el.getAttribute('position');
if (this.isMovingUp) {
this.velocityY = 0.05; // Upward velocity
} else {
this.velocityY -= 0.01; // Gravity
}
position.y += this.velocityY;
if (position.y < 1.6) { // Ground level
position.y = 1.6;
this.velocityY = 0;
}
this.el.setAttribute('position', position);
}
});
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; // Random size between 0.05 and 0.15
let meltTime = Math.random() * 20000 + 5000; // Random time between 5 and 25 seconds
setTimeout(() => {
let snowflakeEl = document.createElement('a-entity');
snowflakeEl.setAttribute('snowflake', {size: size, meltTime: meltTime});
cloud.appendChild(snowflakeEl);
}, i * 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, 50); // Increase the number of particles per cloud
}
}
// Create a larger central cloud
createSnowflakeCloud(0, 8, 0, 100);
</script>
</body>
</html>