Hard Drivin' Clone

Okay, let's enhance the simulation with a more distinct car shape, properly updating wheel visuals, implementing a chase camera, and adding a simple ramp to the environment. We'll modify the existing files to incorporate these changes. Hard Drivin' Clone

Speed: 0 km/h

Press 'C' to change camera

import * as THREE from 'three'; import * as CANNON from 'cannon-es'; import CannonDebugger from 'cannon-es-debugger'; // import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Keep for debugging if needed import { setupPhysics } from './physics.js'; import { createVehicle } from './vehicle.js'; import { setupControls } from './controls.js'; import { setupEnvironment } from './environment.js'; // --- Scene Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); scene.fog = new THREE.Fog(0x87CEEB, 50, 150); // Add fog for distance effect const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const chaseCamera = new THREE.Object3D(); // Use an Object3D to manage chase cam position/rotation chaseCamera.position.set(0, 5, 10); // Initial offset const cockpitCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); // Slightly different FOV maybe let activeCamera = chaseCamera; // Start with chase cam let useChaseCam = true; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // Slightly brighter ambient scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Slightly stronger directional directionalLight.position.set(20, 30, 10); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; // Increase shadow map resolution directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 100; // Adjust shadow camera frustum directionalLight.shadow.camera.left = -40; directionalLight.shadow.camera.right = 40; directionalLight.shadow.camera.top = 40; directionalLight.shadow.camera.bottom = -40; scene.add(directionalLight); // scene.add(new THREE.CameraHelper(directionalLight.shadow.camera)); // --- Physics Setup --- const { world, timeStep } = setupPhysics(); const cannonDebugger = CannonDebugger(scene, world, { color: 0xff0000, scale: 1.01 }); // Slightly offset scale // --- Environment --- const { groundBody, groundMesh, environmentObjects } = setupEnvironment(scene, world); scene.add(...environmentObjects); // Add trees, ramps etc. // --- Vehicle Setup --- const { vehicle, vehicleChassisMesh, wheelMeshes } = createVehicle(scene, world, new CANNON.Vec3(0, 1, -5)); // Start further back scene.add(vehicleChassisMesh); wheelMeshes.forEach(mesh => scene.add(mesh)); // Add wheel meshes to the main scene // Attach chase camera logical object to the car chassis mesh // This makes its local transforms relative to the car vehicleChassisMesh.add(chaseCamera); // Position cockpit camera relative to chassis cockpitCamera.position.set(0, 0.4, 0.5); // Inside the car, looking forward vehicleChassisMesh.add(cockpitCamera); // Attach cockpit cam too // --- Controls --- const controls = setupControls(vehicle); // --- UI Elements --- const speedElement = document.getElementById('speed'); // --- Camera Switching --- window.addEventListener('keydown', (event) => { if (event.code === 'KeyC') { useChaseCam = !useChaseCam; activeCamera = useChaseCam ? chaseCamera : cockpitCamera; console.log("Camera switched to:", useChaseCam ? "Chase" : "Cockpit"); } // Optional: Key for debugger if (event.code === 'KeyP') { cannonDebugger.setVisible(!cannonDebugger.visible) } }); // --- Resize Handler --- window.addEventListener('resize', () => { const aspect = window.innerWidth / window.innerHeight; camera.aspect = aspect; camera.updateProjectionMatrix(); cockpitCamera.aspect = aspect; // Update both cameras cockpitCamera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // --- Game Loop --- const clock = new THREE.Clock(); let lastCallTime = performance.now(); // Chase camera parameters const chaseCamOffset = new THREE.Vector3(0, 4, 8); // Desired offset from car const chaseCamLookAtOffset = new THREE.Vector3(0, 1, 0); // Point slightly above car center const cameraLerpFactor = 0.08; // Smoothing factor function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); const worldDt = 1 / 60; const now = performance.now(); const physicsSteps = Math.floor((now - lastCallTime) / (worldDt * 1000)); lastCallTime = now; // Step the physics world for (let i = 0; i < Math.min(physicsSteps, 5); i++) { world.step(worldDt); } // Update vehicle visual representation vehicleChassisMesh.position.copy(vehicle.chassisBody.position); vehicleChassisMesh.quaternion.copy(vehicle.chassisBody.quaternion); // Update wheel visuals based on physics state for (let i = 0; i < vehicle.wheelInfos.length; i++) { vehicle.updateWheelTransform(i); // Make sure CANNON calculates world transforms const transform = vehicle.wheelInfos[i].worldTransform; const wheelMesh = wheelMeshes[i]; wheelMesh.position.copy(transform.position); wheelMesh.quaternion.copy(transform.quaternion); } // Update controls controls.update(); // Update Camera // The activeCamera (chase or cockpit) is already attached to the vehicleChassisMesh, // so its local position is maintained relative to the car. // We just need to get the world position/quaternion for rendering. // For the chase cam, we might want smoother interpolation than just attaching it. // Let's calculate the desired world position and lerp the main camera towards it. const targetCameraPosition = new THREE.Vector3(); const targetCameraLookAt = new THREE.Vector3(); if (useChaseCam) { // Calculate desired world position for chase cam chaseCamera.getWorldPosition(targetCameraPosition); // Gets world pos based on its local offset & parent (car) // Calculate desired look-at point in world space const lookAtTarget = vehicle.chassisBody.position.clone().add(chaseCamLookAtOffset); // Look slightly above chassis center targetCameraLookAt.copy(lookAtTarget); // Smoothly interpolate the actual rendering camera camera.position.lerp(targetCameraPosition, cameraLerpFactor); camera.lookAt(targetCameraLookAt); // Always look directly for now, could lerp this too } else { // Use Cockpit Cam cockpitCamera.getWorldPosition(targetCameraPosition); // For cockpit, make it look slightly ahead along the car's forward vector const lookAtTarget = new THREE.Vector3(0, 0.4, 5); // Point 5 units ahead locally vehicleChassisMesh.localToWorld(lookAtTarget); // Convert local look-at point to world space targetCameraLookAt.copy(lookAtTarget); // Set camera directly for cockpit view (no lerp needed usually) camera.position.copy(targetCameraPosition); camera.lookAt(targetCameraLookAt); } // Update UI const speed = vehicle.chassisBody.velocity.length(); speedElement.textContent = (speed * 3.6).toFixed(1); // Update physics debugger (optional) cannonDebugger.update(); renderer.render(scene, camera); // Render using the main camera which is lerped/set } console.log("Game started. Use Arrow Keys/WASD to drive, Space for brake, C to change camera, P to toggle physics debug."); animate(); import * as CANNON from 'cannon-es'; export function setupPhysics() { const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0), // broadphase: new CANNON.SAPBroadphase(world), // Optional: Try different broadphase }); world.solver.iterations = 15; // Increase solver iterations for stability world.allowSleep = true; // Define materials const groundMaterial = new CANNON.Material('ground'); const wheelMaterial = new CANNON.Material('wheel'); const chassisMaterial = new CANNON.Material('chassis'); // Material for the car body // Contact between ground and wheels const groundWheelContactMaterial = new CANNON.ContactMaterial( groundMaterial, wheelMaterial, { friction: 0.6, // Increased friction for better grip restitution: 0.1, // Less bouncy wheels contactEquationStiffness: 1e8, contactEquationRelaxation: 3, frictionEquationStiffness: 1e8, frictionEquationRegularization: 3, } ); world.addContactMaterial(groundWheelContactMaterial); // Contact between chassis and ground (for collisions) const chassisGroundContactMaterial = new CANNON.ContactMaterial( chassisMaterial, groundMaterial, { friction: 0.3, // Friction when chassis hits ground restitution: 0.0, // No bounce when chassis hits ground } ); world.addContactMaterial(chassisGroundContactMaterial); // Set default contact material properties (used if no specific material pair is found) world.defaultContactMaterial.friction = 0.1; world.defaultContactMaterial.restitution = 0.2; const timeStep = 1 / 60; // Expose materials for use in other modules return { world, timeStep, groundMaterial, wheelMaterial, chassisMaterial }; } import * as THREE from 'three'; import * as CANNON from 'cannon-es'; export function setupEnvironment(scene, world) { const environmentObjects = []; // Store meshes to add to scene later // --- Ground --- const groundSize = 200; const groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize); // Simple green color for now, texture later const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x4C6A4C, // Darker green // map: groundTexture, // Add texture later side: THREE.DoubleSide }); const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial); groundMesh.rotation.x = -Math.PI / 2; groundMesh.receiveShadow = true; environmentObjects.push(groundMesh); // Add to list // Physics for the ground const { groundMaterial: physicsGroundMat } = world.materials.find(m => m.name === 'ground'); // Get ground material from physics setup const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, material: physicsGroundMat, // Use the defined ground material }); groundBody.addShape(groundShape); groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); world.addBody(groundBody); // --- Simple Ramp --- const rampSize = { width: 5, height: 1.5, depth: 10 }; const rampGeometry = new THREE.BoxGeometry(rampSize.width, rampSize.height, rampSize.depth); const rampMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 }); const rampMesh = new THREE.Mesh(rampGeometry, rampMaterial); rampMesh.position.set(0, rampSize.height / 2 - 0.05, 20); // Position it on the ground rampMesh.rotation.set(0, 0, 0); // No initial rotation needed for basic ramp rampMesh.castShadow = true; rampMesh.receiveShadow = true; environmentObjects.push(rampMesh); // Add to list // Physics for the ramp const rampShape = new CANNON.Box(new CANNON.Vec3(rampSize.width / 2, rampSize.height / 2, rampSize.depth / 2)); const rampBody = new CANNON.Body({ mass: 0, // Static material: physicsGroundMat, // Treat ramp surface like ground for now }); rampBody.addShape(rampShape); rampBody.position.copy(rampMesh.position); rampBody.quaternion.copy(rampMesh.quaternion); world.addBody(rampBody); // --- Simple "Trees" (Cylinders) --- const treeGeometry = new THREE.CylinderGeometry(0.3, 0.5, 8, 8); // Trunk const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // Brown const foliageGeometry = new THREE.SphereGeometry(2.5, 8, 6); // Simple foliage const foliageMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); // Forest Green for (let i = 0; i < 30; i++) { const trunk = new THREE.Mesh(treeGeometry, treeMaterial); const foliage = new THREE.Mesh(foliageGeometry, foliageMaterial); const angle = Math.random() * Math.PI * 2; const radius = 20 + Math.random() * 60; // Place further out const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; trunk.position.set(x, 4, z); // Base of trunk on ground foliage.position.set(x, 8 + 1.5, z); // Foliage above trunk trunk.castShadow = true; foliage.castShadow = true; // No physics for trees yet environmentObjects.push(trunk, foliage); // Add to list } return { groundBody, groundMesh, environmentObjects }; } import * as THREE from 'three'; import * as CANNON from 'cannon-es'; export function createVehicle(scene, world, position) { // --- Get Materials from Physics Setup --- const { wheelMaterial: physicsWheelMat, chassisMaterial: physicsChassisMat } = world.materials.find(m => m.name === 'wheel' || m.name === 'chassis'); // --- Vehicle Visuals --- // More detailed chassis shape (adjust dimensions as needed) const chassisWidth = 1.2; const chassisHeight = 0.6; const chassisLength = 3.0; const chassisGeometry = new THREE.BoxGeometry(chassisWidth, chassisHeight, chassisLength); const chassisMaterial = new THREE.MeshStandardMaterial({ color: 0xcc0000, // Brighter Red metalness: 0.3, roughness: 0.6 }); const vehicleChassisMesh = new THREE.Mesh(chassisGeometry, chassisMaterial); vehicleChassisMesh.castShadow = true; vehicleChassisMesh.receiveShadow = true; // Don't add to scene here, add in main.js // --- Vehicle Physics --- const chassisShape = new CANNON.Box(new CANNON.Vec3(chassisWidth / 2, chassisHeight / 2, chassisLength / 2)); const chassisBody = new CANNON.Body({ mass: 180, // Slightly heavier position: position, shape: chassisShape, material: physicsChassisMat, // Assign chassis material }); // Lower center of mass slightly for stability // chassisBody.centerOfMassOffset = new CANNON.Vec3(0, -0.2, 0); // Doesn't exist directly, adjust wheel connections instead const vehicle = new CANNON.RaycastVehicle({ chassisBody: chassisBody, indexRightAxis: 0, // x indexUpAxis: 1, // y indexForwardAxis: 2, // z }); // --- Wheel Options --- const wheelRadius = 0.35; const wheelWidth = 0.25; const wheelOptions = { radius: wheelRadius, directionLocal: new CANNON.Vec3(0, -1, 0), suspensionStiffness: 35, // Fine-tune these values suspensionRestLength: 0.3, frictionSlip: 3.5, // Adjust grip dampingRelaxation: 2.5, dampingCompression: 1.8, maxSuspensionForce: 100000, rollInfluence: 0.05, // More roll influence axleLocal: new CANNON.Vec3(-1, 0, 0), // Correct axle for THREE.CylinderGeometry orientation chassisConnectionPointLocal: new CANNON.Vec3(), // Set below maxSuspensionTravel: 0.25, customSlidingRotationalSpeed: -30, useCustomSlidingRotationalSpeed: true, material: physicsWheelMat, // Assign wheel material }; // --- Wheel Positions (relative to chassis center) --- const frontTrack = chassisWidth * 0.45; // Distance from center to wheel side const rearTrack = chassisWidth * 0.48; // Slightly wider rear track const wheelBase = chassisLength * 0.35; // Distance from center to front/rear axle const wheelVerticalOffset = -chassisHeight * 0.1; // How high/low wheels connect const wheelPositions = [ { x: -frontTrack, y: wheelVerticalOffset, z: wheelBase }, // Front Left { x: frontTrack, y: wheelVerticalOffset, z: wheelBase }, // Front Right { x: -rearTrack, y: wheelVerticalOffset, z: -wheelBase }, // Rear Left { x: rearTrack, y: wheelVerticalOffset, z: -wheelBase }, // Rear Right ]; // --- Create Wheels (Physics + Visuals) --- const wheelMeshes = []; const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, metalness: 0.1, roughness: 0.8 }); const wheelGeometry = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelWidth, 24); // Rotate cylinder to align with axle direction (X-axis) wheelGeometry.rotateZ(Math.PI / 2); wheelPositions.forEach((pos) => { wheelOptions.chassisConnectionPointLocal.set(pos.x, pos.y, pos.z); vehicle.addWheel(wheelOptions); // Create visual wheel mesh const wheelMesh = new THREE.Mesh(wheelGeometry, wheelMaterial); wheelMesh.castShadow = true; wheelMesh.receiveShadow = true; // Don't add to scene here, add in main.js and update position/rotation there wheelMeshes.push(wheelMesh); }); vehicle.addToWorld(world); // Return physics vehicle, visual chassis mesh, and array of visual wheel meshes return { vehicle, vehicleChassisMesh, wheelMeshes }; } import * as CANNON from 'cannon-es'; export function setupControls(vehicle) { const keyState = {}; window.addEventListener('keydown', (e) => { keyState[e.code] = true; }); window.addEventListener('keyup', (e) => { keyState[e.code] = false; }); const maxSteerVal = 0.5; // Reduced max steering angle slightly const maxForce = 1200; // Increased engine force const brakeForce = 150; // Increased brake force const steerLerp = 0.2; // Smoothing factor for steering return let currentSteerValue = 0; // Track current steering value for smoothing function update() { let engineForce = 0; let targetSteerValue = 0; // Target steering based on input let braking = 0; // --- Keyboard Controls --- if (keyState['ArrowUp'] || keyState['KeyW']) { engineForce = -maxForce; } if (keyState['ArrowDown'] || keyState['KeyS']) { engineForce = maxForce * 0.6; // Stronger reverse } if (keyState['ArrowLeft'] || keyState['KeyA']) { targetSteerValue = maxSteerVal; } else if (keyState['ArrowRight'] || keyState['KeyD']) { targetSteerValue = -maxSteerVal; } else { targetSteerValue = 0; // Return to center if no steer key pressed } // Smoothly interpolate steering towards the target value currentSteerValue += (targetSteerValue - currentSteerValue) * steerLerp; if (keyState['Space']) { braking = brakeForce; } // Apply forces/steering to the vehicle // Apply engine force to rear wheels (indices 2 and 3) vehicle.applyEngineForce(engineForce, 2); vehicle.applyEngineForce(engineForce, 3); // Apply steering to front wheels (indices 0 and 1) vehicle.setSteeringValue(currentSteerValue, 0); vehicle.setSteeringValue(currentSteerValue, 1); // Apply braking if (braking > 0) { vehicle.setBrake(braking, 0); vehicle.setBrake(braking, 1); vehicle.setBrake(braking, 2); vehicle.setBrake(braking, 3); } else { // Release brakes vehicle.setBrake(0, 0); vehicle.setBrake(0, 1); vehicle.setBrake(0, 2); vehicle.setBrake(0, 3); } } return { update }; } Key changes: 1. **`vehicle.js`:** * Creates a more car-like box mesh for the chassis and separate cylinder meshes for wheels. * Wheel positions (`chassisConnectionPointLocal`) are calculated based on chassis dimensions for better placement. * Assigns specific `CANNON.Material` instances (defined in `physics.js`) to the chassis and wheels. * Returns the `vehicleChassisMesh` and `wheelMeshes` array separately. Wheel meshes are *not* added to the scene here. 2. **`main.js`:** * Imports `vehicleChassisMesh` and `wheelMeshes`. * Adds `vehicleChassisMesh` and all `wheelMeshes` to the main scene. * In the `animate` loop: * Updates `vehicleChassisMesh` position/rotation from `vehicle.chassisBody`. * Loops through `vehicle.wheelInfos`, calls `vehicle.updateWheelTransform(i)`, and updates the corresponding `wheelMeshes[i]` position/rotation using `wheelInfo.worldTransform`. * Implements `chaseCamera` (as an `Object3D` attached to the car) and `cockpitCamera` (as a `PerspectiveCamera` attached to the car). * Adds logic to switch between cameras using the 'C' key. * The main `camera`'s position/lookAt is updated each frame based on the `activeCamera` (either smoothly lerping for the chase cam or directly setting for the cockpit cam). * Removes `OrbitControls`. * Adds basic fog. * Adds a key listener 'P' to toggle the Cannon.js debugger visibility. 3. **`environment.js`:** * Adds a simple static `CANNON.Box` and `THREE.Mesh` to act as a ramp. * Adds basic cylinder "trees" visually (no physics yet). Returns all environment meshes in `environmentObjects`. * Assigns the `groundMaterial` from `physics.js` to the ground and ramp bodies. 4. **`physics.js`:** * Defines named `CANNON.Material` instances for `ground`, `wheel`, and `chassis`. * Sets up specific `ContactMaterial` properties for `ground`/`wheel` (more friction) and `chassis`/`ground` interactions. * Exports the materials so they can be referenced when creating bodies. * Increased solver iterations slightly. 5. **`controls.js`:** * Adds simple steering smoothing (`steerLerp`) so the wheels return to center gradually. * Adjusted force/steering values slightly. 6. **`index.html`:** * Added an info div explaining the camera switch key. Now you should see a red car chassis with four wheels that rotate and move with the suspension. You can drive over the ramp, and press 'C' to switch between the chase camera and a basic cockpit view. The environment has some simple trees and fog.