a crowd protests against emoji in Three.js's game

Click here for free DL of the app version that can save data.

No:11902

100

←

Prev Next

→

a crowd protests against emoji in Three.js
Developer User4917｜Date and time 23/8/13 2:54:36
Build time 14.608 sec｜Game capacity 1.626KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Crowd Protests Against Emoji</title>
	<style>
		canvas {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<script>
		// Setting up the scene
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		document.addEventListener('keydown', handleKeyDown);

// Loading the crowd model
		const loader = new THREE.GLTFLoader();
		loader.load('crowd.glb', function(gltf) {
			const crowd = gltf.scene;
			scene.add(crowd);
		});

// Adding controls to the camera
		const controls = new THREE.OrbitControls(camera, renderer.domElement);
		camera.position.z = 5;

// Game loop
		function animate() {
			requestAnimationFrame(animate);
			controls.update();
			renderer.render(scene, camera);
		}

animate();

// Handling keyboard input
		function handleKeyDown(event) {
			if (event.key === ' ') {
				// Toggle emoji display on/off
				toggleEmojis();
			}
		}

// Toggle emoji display
		function toggleEmojis() {
			const crowd = scene.getObjectByName('Crowd');
			crowd.traverse(function(child) {
				if (child.name === 'Emoji') {
					child.visible = !child.visible;
				}
			});
		}
	</script>
</body>
</html>