Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>The Cube Game</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://threejs.org/build/three.min.js"></script> | |
| <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> | |
| <script> | |
| let camera, scene, renderer, controls; | |
| let cube; | |
| let rotationSpeed = 0.01; | |
| function init() { | |
| // Create a camera | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.set(0, 0, 5); | |
| // Create a scene | |
| scene = new THREE.Scene(); | |
| // Create a cube | |
| let geometry = new THREE.BoxGeometry(); | |
| let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| // Create a renderer | |
| renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // Add user controls | |
| controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableKeys = true; | |
| controls.rotateSpeed = 0.5; | |
| controls.zoomSpeed = 1.2; | |
| controls.panSpeed = 0.8; | |
| controls.keys = { LEFT: 65, UP: 87, RIGHT: 68, BOTTOM: 83 }; | |
| controls.addEventListener('change', render); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Rotate the cube | |
| cube.rotation.x += rotationSpeed; | |
| cube.rotation.y += rotationSpeed; | |
| // Render the scene | |
| render(); | |
| } | |
| function render() { | |
| renderer.render(scene, camera); | |
| } | |
| // Listen for window resize events | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| render(); | |
| }); | |
| // Listen for keyboard events | |
| window.addEventListener('keydown', (event) => { | |
| switch (event.key) { | |
| case 'a': | |
| cube.rotation.y += rotationSpeed; | |
| break; | |
| case 'd': | |
| cube.rotation.y -= rotationSpeed; | |
| break; | |
| case 'w': | |
| cube.rotation.x += rotationSpeed; | |
| break; | |
| case 's': | |
| cube.rotation.x -= rotationSpeed; | |
| break; | |
| } | |
| render(); | |
| }); | |
| // Initialize the game | |
| init(); | |
| animate(); | |
| </script> | |
| </body> | |
| </html> | |