3D Adventure with Three.js

{"name":"3D Adventure with Three.js 2.0","description":"Dive into the world of 3D gaming with this beginner-friendly project using Three.js. Create an immersive game environment, complete with interactive elements and dynamic gameplay. Learn the basics of 3D rendering, user input for game controls, and implement fun game logic to challenge players. This project is perfect for anyone looking to explore the exciting realm of 3D game development!","photo":"","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-06-26T20:17:10.851676Z","updated_at":"2025-06-26T20:17:10.851677Z","user_id":119,"status":"PRIVATE","parent_id":8555,"id":8621,"user":{"username":"alex","id":119,"password_hash":null,"updated_at":"2024-06-24T22:27:17.750761Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"f4737c87-29cc-445a-8c68-a81290c17cc3","created_at":"2024-06-24T22:27:17.750758Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let scene, camera, renderer;\n\nlet ground, car;\n\nlet flyingObjects = [];\n\nlet speed = 0.006;\n\nlet riseSpeed = 0.005;\n\nlet descendSpeed = 0.005;\n\nlet objectSpeed = 0.004;\n\nlet gameOver = false;\n\nlet tryAgainButton;\n\nconst groundGeometry = new THREE.PlaneGeometry(100, 100);\n\nconst groundMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 });\n\nfunction setup() {\n // Initialize Three.js scene\n scene = new THREE.Scene();\n\n // Set up camera\n camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000);\n camera.position.set(0, 5, 10); // Initial camera position\n camera.lookAt(0, 0, 0); // Look at the center of the scene\n\n // Set up renderer\n renderer = new THREE.WebGLRenderer();\n renderer.setSize(windowWidth, windowHeight);\n document.body.appendChild(renderer.domElement);\n\n // Add sky box\n const skyGeometry = new THREE.BoxGeometry(100, 100, 100); // Create a large cube\n const skyMaterial = new THREE.MeshBasicMaterial({ color: 0x87CEEB, side: THREE.BackSide }); // Blue color for sky\n const skyBox = new THREE.Mesh(skyGeometry, skyMaterial);\n scene.add(skyBox); // Add the skybox to the scene\n\n // Add ground\n const groundGeometry = new THREE.PlaneGeometry(50, 50);\n const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 }); // Green color for ground\n ground = new THREE.Mesh(groundGeometry, groundMaterial);\n ground.rotation.x = -Math.PI / 2; // Rotate to make it horizontal\n scene.add(ground);\n\n // Add car\n const carGeometry = new THREE.BoxGeometry(2, 1, 4); // Made the car bigger\n const carMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });\n car = new THREE.Mesh(carGeometry, carMaterial);\n car.position.y = 0.5; // Position car on the ground\n scene.add(car);\n\n // Create initial flying objects\n for (let i = 0; i < 10; i++) {\n createFlyingObject();\n }\n\n // Create and configure the Try Again button\n tryAgainButton = createButton('Try Again');\n tryAgainButton.position(windowWidth / 2 - 60, windowHeight / 2 + 40); // Center the button\n tryAgainButton.mousePressed(resetGame); // Set the button to reset the game on click\n tryAgainButton.hide(); // Hide the button initially\n}\n\nfunction draw() {\n requestAnimationFrame(draw);\n\n if (gameOver) {\n displayGameOver(); // Show game over screen\n return; // Exit draw loop\n }\n\n handleKeyboardInput(); // Handle keyboard input\n\n // Update camera position to follow the car\n camera.position.set(car.position.x, car.position.y + 5, car.position.z + 10); // Set camera behind and above the car\n camera.lookAt(car.position); // Make the camera look at the car\n\n // Update flying objects' positions\n flyingObjects.forEach(object => {\n object.position.z += objectSpeed; // Move object towards the car\n if (object.position.z > car.position.z + 20) {\n object.position.z = -50; // Reset position behind the car\n object.position.x = Math.random() * 50 - 25; // Randomize x position\n }\n checkCollision(object); // Check for collision with the car\n });\n\n // Render the scene\n renderer.render(scene, camera);\n}\n\nfunction createFlyingObject() {\n const objectGeometry = new THREE.SphereGeometry(0.5, 16, 16); // Create a small sphere\n const objectMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // Blue color\n const flyingObject = new THREE.Mesh(objectGeometry, objectMaterial);\n\n // Set random position above the ground and away from the car\n flyingObject.position.set(Math.random() * 50 - 25, Math.random() * 10 + 5, Math.random() * -50);\n flyingObjects.push(flyingObject); // Add to the array\n scene.add(flyingObject); // Add to the scene\n}\n\nfunction checkCollision(object) {\n // Simple collision detection\n if (\n car.position.x + 1 >= object.position.x - 0.5 &&\n car.position.x - 1 <= object.position.x + 0.5 &&\n car.position.z + 1 >= object.position.z - 0.5 &&\n car.position.z - 1 <= object.position.z + 0.5 &&\n car.position.y + 1 >= object.position.y - 0.5 &&\n car.position.y - 1 <= object.position.y + 0.5\n ) {\n gameOver = true; // Set game over state\n }\n}\n\nfunction handleKeyboardInput() {\n // Check for key presses and move the car accordingly\n if (gameOver) {\n if (keyIsDown(65)) { // A key\n resetGame(); // Reset the game if A is pressed\n }\n return; // Exit if the game is over\n }\n\n if (keyIsDown(87)) { // W key\n car.position.z -= speed; // Move forward\n }\n if (keyIsDown(83)) { // S key\n car.position.z += speed; // Move backward\n }\n if (keyIsDown(65)) { // A key\n car.position.x -= speed; // Move left\n }\n if (keyIsDown(68)) { // D key\n car.position.x += speed; // Move right\n }\n if (keyIsDown(32)) { // Space key\n car.position.y += riseSpeed; // Move up\n }\n if (keyIsDown(16)) { // Shift key\n car.position.y -= descendSpeed; // Move down\n if (car.position.y < 0) { // Prevent going below ground level\n car.position.y = 0; // Set to ground level\n }\n }\n}\n\nfunction displayGameOver() {\n // Clear the p5.js canvas\n clear(); // Clear the canvas\n\n // Draw semi-transparent background\n fill(0, 0, 0, 127); // Black background with transparency\n rect(0, 0, windowWidth, windowHeight); // Fill the background\n\n fill(255); // Set text color to white\n textSize(48); // Set font size\n textAlign(CENTER); // Center the text\n text(\"Game Over\", windowWidth / 2, windowHeight / 2 - 20); // Centered text\n textSize(24); // Set smaller font for button\n text(\"Press A to Try Again\", windowWidth / 2, windowHeight / 2 + 20); // Centered text\n\n // Show the try again button\n tryAgainButton.show();\n}\n\nfunction resetGame() {\n // Reset game state\n gameOver = false; // Reset game over state\n car.position.set(0, 0.5, 0); // Reset car position\n flyingObjects.forEach(object => {\n object.position.z = Math.random() * -50; // Reset flying object position\n object.position.x = Math.random() * 50 - 25; // Randomize x position\n });\n\n // Hide the try again button\n tryAgainButton.hide();\n}\n\nground = new THREE.Mesh(groundGeometry, groundMaterial);\n\nground.rotation.x = -Math.PI / 2;\n\nscene.add(ground);\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n 3D Adventure with Three.js\n \n \n \n \n\n\n \n\n"},"chat_history":[{"project_id":8621,"message":"","created_at":"2025-06-26T20:17:21.100068Z","output_tokens":null,"deleted":0,"code_id":257778,"sender":"client_script","input_tokens":null,"id":152984}],"assets":[],"messages_sent":0,"comments":[],"steps":[]}