Enhanced 3D Car Game

Okay, let's enhance the 3D car driving game with better visuals, improved controls, and some visual effects. We'll structure the code into multiple files for better organization and use Three.js loaders for external assets like models and textures. **Note:** This setup requires external 3D model and texture files (for the car, ground, and skybox) which cannot be directly included in this text format. You will need to provide these files in an `assets` folder relative to your `index.html`. I will structure the code to load them. For the car, we'll use a GLTF model. For the ground and skybox, we'll use textures. Enhanced 3D Car Game body { margin: 0; overflow: hidden; } canvas { display: block; } import { setupScene, addScenery, createTrain } from './scenery.js'; import { createCar, updateCar } from './car.js'; import { setupPostProcessing, renderWithEffects } from './effects.js'; const loadingManager = new THREE.LoadingManager(); const loader = new THREE.GLTFLoader(loadingManager); const textureLoader = new THREE.TextureLoader(loadingManager); const cubeTextureLoader = new THREE.CubeTextureLoader(loadingManager); let scene, camera, renderer, composer; let car; let trainAnimator; const keys = { w: false, a: false, s: false, d: false }; // Load assets and initialize loadingManager.onLoad = function () { console.log('All assets loaded!'); init(); animate(); }; loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) { console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'); }; loadingManager.onError = function (url) { console.error('There was an error loading ' + url); }; // --- Load Assets --- // You need to provide these files in an 'assets' folder const carModelPath = 'assets/car/car.gltf'; // Replace with your car model path const groundTexturePath = 'assets/textures/grass.jpg'; // Replace with your ground texture path const skyboxPaths = [ // Replace with your skybox texture paths (px, nx, py, ny, pz, nz) 'assets/skybox/px.jpg', 'assets/skybox/nx.jpg', 'assets/skybox/py.jpg', 'assets/skybox/ny.jpg', 'assets/skybox/pz.jpg', 'assets/skybox/nz.jpg' ]; let carModel; let groundTexture; let skyboxTexture; loader.load(carModelPath, (gltf) => { carModel = gltf.scene; console.log('Car model loaded'); }); textureLoader.load(groundTexturePath, (texture) => { groundTexture = texture; groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; groundTexture.repeat.set(50, 50); // Adjust tiling console.log('Ground texture loaded'); }); cubeTextureLoader.load(skyboxPaths, (texture) => { skyboxTexture = texture; console.log('Skybox texture loaded'); }); // --- Initialization --- function init() { ({ scene, camera, renderer } = setupScene(skyboxTexture)); composer = setupPostProcessing(renderer, scene, camera); // Add ground and other static scenery addScenery(scene, groundTexture); // Create the car using the loaded model car = createCar(scene, carModel); // Create and animate the train trainAnimator = createTrain(scene); // Position camera behind the car updateCamera(); // Event listeners window.addEventListener('keydown', (event) => { const key = event.key.toLowerCase(); if (keys.hasOwnProperty(key)) { keys[key] = true; } }); window.addEventListener('keyup', (event) => { const key = event.key.toLowerCase(); if (keys.hasOwnProperty(key)) { keys[key] = false; } }); window.addEventListener('resize', onWindowResize); } // --- Animation Loop --- function animate() { requestAnimationFrame(animate); if (car) { // Ensure car is loaded before updating updateCar(car, keys); updateCamera(); } if (trainAnimator) { trainAnimator(); // Animate the train } // Render the scene with post-processing effects renderWithEffects(composer); } // --- Helper Functions --- function updateCamera() { if (!car) return; const cameraDistance = 10; const cameraHeight = 5; const cameraLookAtHeight = 1; // Look slightly above the car's base // Calculate camera position behind the car based on its rotation const carDirection = new THREE.Vector3(); car.getWorldDirection(carDirection); // Get forward direction of the car const cameraPosition = car.position.clone() .add(carDirection.multiplyScalar(-cameraDistance)) // Move back .add(new THREE.Vector3(0, cameraHeight, 0)); // Move up camera.position.copy(cameraPosition); // Make camera look at a point slightly above the car const lookAtPoint = car.position.clone().add(new THREE.Vector3(0, cameraLookAtHeight, 0)); camera.lookAt(lookAtPoint); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); // Resize composer as well } // Note: init() and animate() are called after all assets are loaded by loadingManager.onLoad import * as THREE from 'three'; let carMesh = null; // Store the loaded car mesh const carPhysics = { speed: 0, acceleration: 0.08, braking: 0.2, maxSpeed: 1.0, // Increased max speed reverseSpeed: 0.4, friction: 0.03, turnSpeed: 0.04, // Base turn speed maxTurnSpeed: 0.06, // Max turn speed at low speeds minTurnSpeed: 0.02, // Min turn speed at high speeds driftFactor: 0.95 // How much speed is lost when turning sharply }; export function createCar(scene, model) { if (!model) { console.error("Car model not loaded!"); // Create a placeholder box if model loading fails const carGeometry = new THREE.BoxGeometry(1, 0.5, 2); const carMaterial = new THREE.MeshStandardMaterial({ color: 0xFF4500, metalness: 0.8, roughness: 0.3 }); carMesh = new THREE.Mesh(carGeometry, carMaterial); carMesh.position.y = 0.25; carMesh.castShadow = true; carMesh.receiveShadow = true; scene.add(carMesh); return carMesh; } carMesh = model; carMesh.scale.set(0.5, 0.5, 0.5); // Adjust scale based on your model carMesh.position.y = 0; // Adjust vertical position carMesh.rotation.y = Math.PI; // Adjust initial rotation if needed // Traverse the model to enable shadows on all parts carMesh.traverse((node) => { if (node.isMesh) { node.castShadow = true; node.receiveShadow = true; // Optional: Improve material appearance if (node.material.map) { node.material.map.anisotropy = 16; // Improve texture filtering } node.material.metalness = node.material.metalness || 0.8; node.material.roughness = node.material.roughness || 0.3; } }); scene.add(carMesh); console.log("Car added to scene"); return carMesh; } export function updateCar(car, keys) { if (!car) return; // Apply acceleration/braking if (keys.w) { carPhysics.speed += carPhysics.acceleration; } else if (keys.s) { carPhysics.speed -= carPhysics.braking; } else { // Apply friction carPhysics.speed *= (1 - carPhysics.friction); } // Clamp speed carPhysics.speed = Math.max(-carPhysics.reverseSpeed, Math.min(carPhysics.maxSpeed, carPhysics.speed)); // Apply turning const isMoving = Math.abs(carPhysics.speed) > 0.01; if (isMoving) { // Adjust turn speed based on current speed (faster car = less sharp turn) const currentTurnSpeed = THREE.MathUtils.lerp( carPhysics.maxTurnSpeed, carPhysics.minTurnSpeed, Math.abs(carPhysics.speed) / carPhysics.maxSpeed ); if (keys.a) { car.rotation.y += currentTurnSpeed * (carPhysics.speed > 0 ? 1 : -1); // Turn direction depends on movement direction if (Math.abs(carPhysics.speed) > carPhysics.maxSpeed * 0.5) { // Apply drift effect at higher speeds carPhysics.speed *= carPhysics.driftFactor; } } if (keys.d) { car.rotation.y -= currentTurnSpeed * (carPhysics.speed > 0 ? 1 : -1); // Turn direction depends on movement direction if (Math.abs(carPhysics.speed) > carPhysics.maxSpeed * 0.5) { // Apply drift effect at higher speeds carPhysics.speed *= carPhysics.driftFactor; } } } // Update car position based on speed and direction // Get the car's forward direction vector const forward = new THREE.Vector3(); car.getWorldDirection(forward); // Gets the direction the object is facing // Move the car in its forward direction car.position.add(forward.multiplyScalar(carPhysics.speed)); // Simple boundary check (optional) const boundary = 95; // Half the ground size car.position.x = Math.max(-boundary, Math.min(boundary, car.position.x)); car.position.z = Math.max(-boundary, Math.min(boundary, car.position.z)); } import * as THREE from 'three'; export function setupScene(skyboxTexture) { const scene = new THREE.Scene(); // Use skybox texture for background if (skyboxTexture) { scene.background = skyboxTexture; } else { scene.background = new THREE.Color(0x87CEEB); // Fallback sky blue } const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows renderer.toneMapping = THREE.ACESFilmicToneMapping; // Improve color mapping renderer.toneMappingExposure = 1.2; // Adjust exposure document.body.appendChild(renderer.domElement); // Add lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); // Brighter ambient light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Stronger directional light (Sun) directionalLight.position.set(50, 100, 50); directionalLight.castShadow = true; // Configure shadow properties for the directional light directionalLight.shadow.mapSize.width = 2048; // Higher resolution shadows directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 200; directionalLight.shadow.camera.left = -100; directionalLight.shadow.camera.right = 100; directionalLight.shadow.camera.top = 100; directionalLight.shadow.camera.bottom = -100; directionalLight.shadow.bias = -0.001; // Reduce shadow acne scene.add(directionalLight); return { scene, camera, renderer }; } export function addScenery(scene, groundTexture) { // Create ground const groundGeometry = new THREE.PlaneGeometry(200, 200); const groundMaterial = new THREE.MeshStandardMaterial({ map: groundTexture, // Use texture color: 0x8FBC8F, // Base color if texture fails or for tint side: THREE.DoubleSide }); if (!groundTexture) { groundMaterial.color.set(0x32CD32); // Fallback green if texture not loaded } const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Add more detailed trees function createDetailedTree(x, z) { // Trunk const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, 3, 12); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0xA0522D }); // Sienna const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.set(x, 1.5, z); trunk.castShadow = true; trunk.receiveShadow = true; scene.add(trunk); // Leaves (multiple spheres/cones) const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x006400 }); // Dark Green const crown1 = new THREE.Mesh(new THREE.SphereGeometry(1.5, 16, 16), leavesMaterial); crown1.position.set(x, 4, z); crown1.castShadow = true; crown1.receiveShadow = true; scene.add(crown1); const crown2 = new THREE.Mesh(new THREE.SphereGeometry(1.2, 16, 16), leavesMaterial); crown2.position.set(x + 0.5, 3.5, z + 0.3); crown2.castShadow = true; crown2.receiveShadow = true; scene.add(crown2); const crown3 = new THREE.Mesh(new THREE.SphereGeometry(1.3, 16, 16), leavesMaterial); crown3.position.set(x - 0.4, 3.8, z - 0.5); crown3.castShadow = true; crown3.receiveShadow = true; scene.add(crown3); } // Add more trees for (let i = 0; i < 50; i++) { // Increased tree count const x = (Math.random() - 0.5) * 180; const z = (Math.random() - 0.5) * 180; // Avoid placing trees too close to the center where the car starts if (Math.abs(x) > 10 || Math.abs(z) > 10) { createDetailedTree(x, z); } } // Add more varied mountains function createVariedMountain(x, z, baseRadius, height) { const mountainGeometry = new THREE.ConeGeometry(baseRadius, height, 32); // More segments const mountainMaterial = new THREE.MeshStandardMaterial({ color: 0x708090 }); // Slate Grey const mountain = new THREE.Mesh(mountainGeometry, mountainMaterial); mountain.position.set(x, height / 2, z); mountain.castShadow = true; mountain.receiveShadow = true; scene.add(mountain); } createVariedMountain(80, 80, 30, 50); createVariedMountain(-90, -70, 40, 60); createVariedMountain(60, -100, 35, 55); createVariedMountain(-50, 90, 25, 40); } export function createTrain(scene) { const trainGroup = new THREE.Group(); const carCount = 6; // More cars const carLength = 6; const carWidth = 2.5; const carHeight = 3.5; const connectionGap = 0.7; const wheelRadius = 0.7; const wheelThickness = 0.5; for (let i = 0; i < carCount; i++) { // Car body const carGeometry = new THREE.BoxGeometry(carWidth, carHeight, carLength); const carMaterial = new THREE.MeshStandardMaterial({ color: i === 0 ? 0xC0392B : 0x3498DB, metalness: 0.6, roughness: 0.4 }); // Engine red, cars blue const carMesh = new THREE.Mesh(carGeometry, carMaterial); carMesh.position.z = i * (carLength + connectionGap); carMesh.position.y = carHeight / 2; carMesh.castShadow = true; carMesh.receiveShadow = true; trainGroup.add(carMesh); // Wheels (simple cylinders) const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x2C3E50, metalness: 0.8, roughness: 0.2 }); // Dark grey/black const wheelPositions = [ { x: carWidth / 2 + wheelThickness / 2, z: carLength / 3 }, { x: carWidth / 2 + wheelThickness / 2, z: -carLength / 3 }, { x: -(carWidth / 2 + wheelThickness / 2), z: carLength / 3 }, { x: -(carWidth / 2 + wheelThickness / 2), z: -carLength / 3 }, ]; wheelPositions.forEach(pos => { const wheelGeometry = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelThickness, 16); const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel.rotation.z = Math.PI / 2; // Rotate to be horizontal wheel.position.set(pos.x, wheelRadius, carMesh.position.z + pos.z); wheel.castShadow = true; wheel.receiveShadow = true; trainGroup.add(wheel); }); } trainGroup.position.set(0, 0, 120); // Start position further out trainGroup.rotation.y = Math.PI / 2; // Rotate to run along X axis scene.add(trainGroup); // Simple animation for the train const trainSpeed = 0.2; const trackLimit = 150; // How far the train travels before looping function animateTrain() { trainGroup.position.x += trainSpeed; if (trainGroup.position.x > trackLimit) { trainGroup.position.x = -trackLimit; // Loop back } } return animateTrain; // Return the animation function } import * as THREE from 'three'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { BloomPass } from 'three/addons/postprocessing/BloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; let composer; export function setupPostProcessing(renderer, scene, camera) { composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); // Add Bloom effect (makes bright areas glow) // Parameters: strength, kernelSize, sigma, resolution const bloomPass = new BloomPass(1.0, 25, 4.0, 256); composer.addPass(bloomPass); // Add SMAA Pass for Anti-Aliasing const smaaPass = new SMAAPass(window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio()); composer.addPass(smaaPass); return composer; } export function renderWithEffects(composer) { if (composer) { composer.render(); } } **To make this work, you need to:** 1. Save the code above into `index.html`, `style.css`, `main.js`, `car.js`, `scenery.js`, and `effects.js`. 2. Create a folder named `assets` in the same directory. 3. Inside `assets`, create a folder named `car`. Find a simple GLTF car model online (e.g., from Sketchfab, TurboSquid, or Poly Pizza - look for free, downloadable models) and place its files (usually a `.gltf` or `.glb` file and potentially a `textures` folder) inside `assets/car`. Update the `carModelPath` in `main.js` if the file name isn't `car.gltf`. 4. Inside `assets`, create a folder named `textures`. Find a seamless grass or ground texture image (e.g., `.jpg` or `.png`) and place it inside `assets/textures`. Update the `groundTexturePath` in `main.js`. 5. Inside `assets`, create a folder named `skybox`. Find a set of 6 skybox images (usually named like `px.jpg`, `nx.jpg`, `py.jpg`, `ny.jpg`, `pz.jpg`, `nz.jpg` for positive/negative X, Y, Z axes) and place them inside `assets/skybox`. Update the `skyboxPaths` array in `main.js` if the names are different. Once you have the assets in place, the game should load with the improved visuals, WASD controls, and post-processing effects. The car physics are also slightly more refined.