Spaces:
Running
Running
File size: 3,055 Bytes
a06e4f3 22a474f a06e4f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html>
<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>
|