1-FirstHTML5Space-AIPP-AR-VR

Running

App Files Files Community

1-FirstHTML5Space-AIPP-AR-VR / backup1.index.html

awacke1

Create backup1.index.html

9a7645b verified about 2 years ago

raw

history blame contribute delete

4.42 kB

	<!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>