import * as THREE from 'three'; import { Controls } from 'ControlManager'; import { VehicleManager } from 'VehicleManager'; import { GameManager } from 'GameManager'; import { CharacterManager } from 'CharacterManager'; import { GAME_CONFIG, TRACK_CONFIG, CAR_CONFIG } from 'config'; import { TrackGenerator } from 'TrackGenerator'; import { TRACK_DATA } from 'TrackData'; import React from 'react'; import ReactDOM from 'react-dom'; import { GameUI } from 'GameUI'; import { TrackGeneratorTool } from 'TrackGeneratorTool'; import { PropulsionEffectManager } from 'PropulsionEffect'; import { ExhaustEffectManager } from 'ExhaustEffect'; // Import ExhaustEffectManager import { DebugVisualization } from 'DebugVisualization'; // Import DebugVisualization import { VisualEffectsManager } from 'VisualEffectsManager'; // Import VisualEffectsManager import { loadSupabase } from 'supabaseClient'; // Import Supabase client loader // CompletionScreenManager import removed export class ThreeScene { constructor(mountRef, options = {}) { this.mountRef = mountRef; this.selectedCarId = options.selectedCarId || GAME_CONFIG.defaultCar; this.selectedTrackId = options.selectedTrackId || GAME_CONFIG.defaultTrack; this.selectedCharacterId = options.selectedCharacterId || 'Raven_Sentinel'; this.onMenuRequested = options.onMenuRequested || null; this.onCountdownUpdate = options.onCountdownUpdate; // Accept the callback from options this.onSteeringUpdate = options.onSteeringUpdate || null; // Add callback for raw steering this.onRaceComplete = options.onRaceComplete || null; // Store the race complete callback // this.completionScreen = null; // Direct reference removed // this.completionScreenTimeout = null; // Timeout ID removed this.steeringSensitivity = options.steeringSensitivity; // this.completionManager = null; // Property removed this.trackConfig = null; // this.gameUIElement = document.createElement('div'); // No longer needed for direct render // this.mountRef.appendChild(this.gameUIElement); // No longer needed this.scene = null; this.camera = null; this.renderer = null; this.deviceType = this.detectDeviceType(); this.clock = new THREE.Clock(); this.animationFrameId = null; this.controls = null; this.vehicleManager = null; this.characterManager = null; this.gameManager = null; this.objects = []; this.trackGenerator = null; this.currentTrack = null; this.visualEffectsManager = null; this.propulsionEffectManager = null; this.exhaustEffectManager = null; // Add exhaust effect manager property this.debugVisualization = null; // Add debug visualization property this.supabase = null; // Add property for Supabase client instance, will be loaded in init if (this.checkWebGLSupport()) { this.init(); } else { this.showWebGLError(); // Ensure error is shown if WebGL is not supported } this.previousProjectionDistance = null; // Store previous frame's distance to finish line plane // Mouse control state this.isMouseDown = false; this.previousMousePosition = { x: 0, y: 0 }; this.cameraYawOffset = 0; // Horizontal offset this.cameraPitchOffset = 0; // Vertical offset } checkWebGLSupport() { try { const canvas = document.createElement('canvas'); return !!( window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) ); } catch (e) { return false; } } showWebGLError() { const errorMessage = document.createElement('div'); errorMessage.style.position = 'absolute'; errorMessage.style.top = '50%'; errorMessage.style.left = '50%'; errorMessage.style.transform = 'translate(-50%, -50%)'; errorMessage.style.textAlign = 'center'; errorMessage.style.color = 'white'; errorMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; errorMessage.style.padding = '20px'; errorMessage.style.borderRadius = '10px'; errorMessage.style.fontFamily = 'Arial, sans-serif'; errorMessage.innerHTML = `

WebGL Not Supported

Sorry, your browser or device doesn't support WebGL.

Please try using a modern browser or updating your graphics drivers.

`; this.mountRef.appendChild(errorMessage); } async init() { // Make init async to handle Supabase loading this.setupScene(); this.setupCamera(); this.setupRenderer(); this.setupLights(); this.createFloor(); // --- Load Supabase Client Early --- try { this.supabase = await loadSupabase(); // Load and store Supabase client if (!this.supabase) { console.warn("Supabase client failed to load during initialization."); // Decide if this is critical. If so, throw error or show message. } else { console.log("Supabase client loaded successfully in init."); } } catch (error) { console.error("Error loading Supabase in init:", error); // Handle error appropriately, maybe show a message to the user } // --- End Supabase Loading --- // Load track configuration this.loadTrackConfig(); this.initializeGameComponents(); this.initVisualEffects(); // Keep this before track init this.initTrack(); this.initDebugVisualization(); // Initialize debug viz after main components // Initial adjustment for device type this.adjustCameraForDevice(); window.addEventListener('resize', this.handleResize); // Add mouse event listeners this.renderer.domElement.addEventListener('mousedown', this.handleMouseDown); this.renderer.domElement.addEventListener('mouseup', this.handleMouseUp); this.renderer.domElement.addEventListener('mousemove', this.handleMouseMove); this.renderer.domElement.addEventListener('mouseleave', this.handleMouseUp); // Treat leaving as mouse up this.animate(); } setupScene() { this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0x000000); // Default fog - will be updated based on track with increased distance this.scene.fog = new THREE.Fog(0x000000, 100, 800); } setupCamera() { this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 3000 // Increased far plane to 3000 for much greater render distance ); // Position camera directly behind the vehicle at initialization this.cameraHeight = GAME_CONFIG.camera.defaultHeight; const followDistance = GAME_CONFIG.camera.followDistance; // Position the camera behind where the vehicle will be this.camera.position.set(0, this.cameraHeight, -followDistance); // Look toward where the vehicle will be positioned this.camera.lookAt(0, 0, 0); // Store default FOV for dynamic adjustment this.defaultFOV = 75; this.currentFOV = this.defaultFOV; } setupRenderer() { try { // Set appropriate antialias based on device type to improve performance on mobile const useAntialias = this.deviceType !== 'mobile'; this.renderer = new THREE.WebGLRenderer({ antialias: useAntialias, powerPreference: 'high-performance' }); this.renderer.setSize(window.innerWidth, window.innerHeight); // Adjust pixel ratio for different devices // Use lower pixel ratio on mobile for better performance const maxPixelRatio = this.deviceType === 'mobile' ? 2 : 3; const devicePixelRatio = Math.min(window.devicePixelRatio, maxPixelRatio); this.renderer.setPixelRatio(devicePixelRatio); this.mountRef.appendChild(this.renderer.domElement); } catch (error) { console.error('Error creating WebGL renderer:', error); this.showWebGLError(); throw new Error('Failed to create WebGL renderer'); } } setupLights() { const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); this.scene.add(ambientLight); this.objects.push(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(0, 10, 5); this.scene.add(directionalLight); this.objects.push(directionalLight); } initializeGameComponents() { // Initialize the vehicle manager with selected car this.vehicleManager = new VehicleManager(this.scene, this.selectedCarId); // Apply steering sensitivity from props if (this.vehicleManager && this.steeringSensitivity !== undefined) { // Map steeringSensitivity from 10-100 range to appropriate vehicle sensitivity // Default steeringSensitivity is 50, map that to the current value const baseVehicleSensitivity = this.vehicleManager.steeringSensitivity; const sensitivityFactor = this.steeringSensitivity / 50; this.vehicleManager.steeringSensitivity = baseVehicleSensitivity * sensitivityFactor; console.log(`Applied steering sensitivity from props: ${this.steeringSensitivity}%, factor: ${sensitivityFactor}`); } // Initialize character manager this.characterManager = new CharacterManager(this.scene); // Special handling for Dolphine character if (this.selectedCharacterId === 'Dolphine') { console.log('Initializing Dolphine character model'); // Ensure we have the correct model URL const dolphineConfig = CAR_CONFIG['Dolphine']; if (dolphineConfig && dolphineConfig.modelUrl) { console.log(`Using Dolphine model: ${dolphineConfig.modelUrl}`); } } // Select the character based on ID this.characterManager.selectCharacter(this.selectedCharacterId); // Initialize game manager, correctly mapping the onRaceComplete callback // Also pass onLapComplete if GameManager needs it internally or for other ThreeScene logic this.gameManager = new GameManager(this.scene, { onRaceComplete: this.onRaceComplete, // Pass the callback intended for race completion // Add onLapComplete if GameManager uses it or needs to pass it elsewhere: // onLapComplete: (lapData) => { /* Handle lap completion within ThreeScene if needed */ } }); this.gameManager.init(); // Connect GameManager's countdown update callback to the one passed from App.js this.gameManager.onCountdownUpdate = this.onCountdownUpdate; // Assign the passed callback // Pass important scene references to GameManager this.gameManager.scene = this; // Initialize controls this.controls = new Controls(this); // Make controls accessible to other components this.game = { controls: this.controls, visualEffectsManager: null // Placeholder, updated later }; // Initialize Propulsion Effect Manager if (this.vehicleManager && this.vehicleManager.getVehicle()) { // Get the specific config for the selected car const carConfig = CAR_CONFIG[this.selectedCarId] || {}; let propulsionOffsetsToUse; // GENERALIZED: Check if specific offsets are defined in the config for ANY car if (carConfig.propulsionEffects?.offsets) { // Use config offsets if they exist propulsionOffsetsToUse = carConfig.propulsionEffects.offsets; console.log(`Using ${propulsionOffsetsToUse.length}-point propulsion config for ${this.selectedCarId}`); } else { // Use default 2-point offsets otherwise const rearOffset = -1.8; const horizontalSpread = 0.4; propulsionOffsetsToUse = [ new THREE.Vector3(-horizontalSpread, -0.1, rearOffset), new THREE.Vector3(horizontalSpread, -0.1, rearOffset) ]; console.log(`Using default 2-point propulsion config for ${this.selectedCarId}`); } this.propulsionEffectManager = new PropulsionEffectManager({ vehicleRef: this.vehicleManager.getVehicle(), offsets: propulsionOffsetsToUse, // Use the determined offsets carConfig: carConfig, }); // Add all generated meshes to the scene this.propulsionEffectManager.meshes.forEach(mesh => { this.scene.add(mesh); }); } else { console.error("VehicleManager or vehicle mesh not available for PropulsionEffectManager"); } // Initialize Exhaust Effect Manager with conditional logic if (this.vehicleManager && this.vehicleManager.getVehicle()) { // Get the specific config for the selected car (re-fetched for clarity) const carConfig = CAR_CONFIG[this.selectedCarId] || {}; let exhaustOptions = {}; // GENERALIZED: Check if specific points are defined in the config for ANY car if (carConfig.exhaustEffects?.points) { // Use config points and other settings if they exist exhaustOptions = { vehicleRef: this.vehicleManager.getVehicle(), points: carConfig.exhaustEffects.points, // Use 'points' from config ...(carConfig.exhaustEffects || {}) // Include other config settings like color, intensity }; console.log(`Using ${carConfig.exhaustEffects.points.length}-point exhaust config for ${this.selectedCarId}`); } else { // Use default 2-point offsets and default settings otherwise const rearOffsetExhaust = -1.9; const horizontalSpreadExhaust = 0.5; const verticalOffsetExhaust = -0.2; const defaultExhaustOffsets = [ new THREE.Vector3(-horizontalSpreadExhaust, verticalOffsetExhaust, rearOffsetExhaust), new THREE.Vector3(horizontalSpreadExhaust, verticalOffsetExhaust, rearOffsetExhaust) ]; exhaustOptions = { vehicleRef: this.vehicleManager.getVehicle(), offsets: defaultExhaustOffsets, // Use 'offsets' for the manager constructor if it expects that // We don't pass other carConfig.exhaustEffects here, letting defaults apply }; console.log(`Using default 2-point exhaust config for ${this.selectedCarId}`); } this.exhaustEffectManager = new ExhaustEffectManager(exhaustOptions); // Add exhaust meshes to the scene this.exhaustEffectManager.meshes.forEach(mesh => { this.scene.add(mesh); }); } else { console.error("VehicleManager or vehicle mesh not available for ExhaustEffectManager"); } // Completion Screen Manager initialization removed } initVisualEffects() { // Initialize the visual effects manager for grid and other visual enhancements this.visualEffectsManager = new VisualEffectsManager(this.scene); } loadTrackConfig() { // Get track configuration from CONFIG - using import instead of require // TRACK_CONFIG is already imported at the top of the file if (TRACK_CONFIG && TRACK_CONFIG[this.selectedTrackId]) { this.trackConfig = TRACK_CONFIG[this.selectedTrackId]; console.log(`Loaded track config for: ${this.trackConfig.name}`); // Apply track-specific visual effects this.applyTrackVisualEffects(); } else { console.warn(`Track config not found for: ${this.selectedTrackId}, using default`); } } initTrack() { // Initialize track generator this.trackGenerator = new TrackGenerator(this.scene); // Get track data based on selection const trackData = TRACK_DATA[this.selectedTrackId]; // Initialize track generator tool for visual elements this.trackGeneratorTool = new TrackGeneratorTool(this.scene, this.trackGenerator); if (trackData) { // Apply any track config specific settings if (this.trackConfig) { // You could modify track data here based on config if needed if (this.trackConfig.displayLength) { console.log(`Track length: ${this.trackConfig.displayLength}`); } } // Generate the track this.currentTrack = this.trackGenerator.generateTrack(trackData); // Create start and finish line visuals if (this.trackGeneratorTool) { this.trackGeneratorTool.createStartLine(trackData); this.trackGeneratorTool.createFinishLine(trackData); // AI Manager initialization removed // this.aiManager = new AIManager(this.scene, this.trackGenerator); // this.aiManager.spawnAIVehicles(); } // Position vehicle at the start line defined in track data if (this.vehicleManager && trackData.points && trackData.points.length > 0) { // Use the startLine.t value to position at the defined start line const startLineT = trackData.startLine ? trackData.startLine.t : 0; // Get position on the track curve using the startLine.t parameter const startPointOnCurve = this.trackGenerator.trackCurve.getPointAt(startLineT); const startPoint = new THREE.Vector3( startPointOnCurve.x, startPointOnCurve.y + 0.5, // Reduced height offset for smoother start startPointOnCurve.z ); this.vehicleManager.setVehiclePosition( startPoint.x, startPoint.y, startPoint.z ); // Calculate initial direction based on curve tangent at start position if (this.trackGenerator && this.trackGenerator.trackCurve) { const startLineT = trackData.startLine ? trackData.startLine.t : 0; // Get tangent at the start position const tangent = this.trackGenerator.trackCurve.getTangentAt(startLineT); // Use the start point from the curve const firstPoint = this.trackGenerator.trackCurve.getPointAt(startLineT); // Calculate second point using the tangent direction const secondPoint = new THREE.Vector3( firstPoint.x + tangent.x, firstPoint.y + tangent.y, firstPoint.z + tangent.z ); // Set initial camera and vehicle direction const direction = new THREE.Vector3().subVectors(secondPoint, firstPoint).normalize(); // Position camera farther behind and above the vehicle const cameraOffset = new THREE.Vector3(0, 2.4, -5.3); // Increased distance by another 15% this.camera.position.copy(startPoint).add(cameraOffset); this.camera.lookAt(startPoint); // Calculate initial rotation for the vehicle this.initialRotation = Math.atan2(direction.x, direction.z); this.vehicleManager.setVehicleRotation(0, this.initialRotation || 0, 0); } // Ensure the vehicle is placed on the track surface this.updateVehiclePositionOnTrack(startPoint); // Initialize steering-related properties this.currentSteering = 0; this.targetVehicleRotation = this.initialRotation || 0; } } else { console.error(`Track data not found for: ${this.selectedTrackId}`); } } initDebugVisualization() { // Initialize debug visualization, passing necessary managers if (this.scene && this.camera && this.vehicleManager && this.trackGenerator) { this.debugVisualization = new DebugVisualization( this.scene, this.camera, this.vehicleManager, this.trackGenerator ); } else { console.warn('Cannot initialize DebugVisualization: Missing required managers.'); } } applyTrackVisualEffects() { // Apply different visual effects based on track type if (this.selectedTrackId === 'NeonspireCircuit') { // Neonspire Circuit gets a cyberpunk night city vibe with neon fog and lighting // Create a dark fog with neon blue/purple tint const fogColor = new THREE.Color(0x120030); this.scene.fog = new THREE.FogExp2(fogColor, 0.0020); this.scene.background = new THREE.Color(0x080018); // Adjust lighting for night city environment if (this.scene) { // Remove existing lights this.scene.children.forEach(child => { if (child.isLight) { this.scene.remove(child); } }); // Add neon city specific lighting // Ambient light - dark purple base light const ambientLight = new THREE.AmbientLight(0x220033, 0.4); this.scene.add(ambientLight); this.objects.push(ambientLight); // Main neon accent lights const pinkLight = new THREE.DirectionalLight(0xff00ff, 0.7); pinkLight.position.set(5, 15, 10); this.scene.add(pinkLight); this.objects.push(pinkLight); const cyanLight = new THREE.DirectionalLight(0x00ffff, 0.7); cyanLight.position.set(-10, 20, -5); this.scene.add(cyanLight); this.objects.push(cyanLight); // Neon light flares have been removed } } else { // Default track lighting and fog with increased distance this.scene.fog = new THREE.Fog(0x000000, 100, 800); this.scene.background = new THREE.Color(0x000000); // Default lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); this.scene.add(ambientLight); this.objects.push(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(0, 10, 5); this.scene.add(directionalLight); this.objects.push(directionalLight); } } handleResize = () => { if (!this.camera || !this.renderer) return; // Update device type on resize this.deviceType = this.detectDeviceType(); this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); // Apply optimized size and quality settings based on device this.renderer.setSize(window.innerWidth, window.innerHeight); // Adjust render quality on resize for mobile if (this.deviceType === 'mobile') { // Lower pixel ratio for mobile const maxPixelRatio = 2; this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, maxPixelRatio)); } else { // Higher quality for desktop/tablet const maxPixelRatio = 3; this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, maxPixelRatio)); } // Adjust camera parameters based on device this.adjustCameraForDevice(); } adjustCameraForDevice() { if (!this.camera) return; // Adjust camera parameters based on device type if (this.deviceType === 'mobile') { // On mobile, increase FOV for better visibility this.defaultFOV = 80; this.currentFOV = this.defaultFOV; this.camera.fov = this.defaultFOV; // Update camera params for smaller screens this.cameraHeight = GAME_CONFIG.camera.defaultHeight * 0.9; // Lower camera for mobile } else if (this.deviceType === 'tablet') { // Tablet adjustments this.defaultFOV = 70; // Slightly narrower FOV this.currentFOV = this.defaultFOV; this.camera.fov = this.defaultFOV; this.cameraHeight = GAME_CONFIG.camera.defaultHeight * 0.85; // Lower camera for tablet } else { // Desktop adjustments (default) this.defaultFOV = 68; // Narrower FOV for more focused view this.currentFOV = this.defaultFOV; this.camera.fov = this.defaultFOV; this.cameraHeight = GAME_CONFIG.camera.defaultHeight * 0.8; // Lower camera for desktop } this.camera.updateProjectionMatrix(); } updateVehicle(deltaTime) { this.controls.update(deltaTime); const vehiclePosition = this.vehicleManager.getVehiclePosition(); const vehicle = this.vehicleManager.getVehicle(); const speed = this.vehicleManager.getSpeed(); const steering = this.vehicleManager.getSteering(); // Store current steering (the one actually used) for camera effects this.currentSteering = steering; // Use steering directly from VehicleManager // Calculate steering-based rotation that only happens when vehicle is moving if (vehicle && Math.abs(speed) > 0.01) { // Get current rotation const currentRotation = vehicle.rotation.y; // Calculate new rotation based on steering, speed, and steering angle // Normalize speed to get more natural steering at all speeds const normalizedSpeed = Math.abs(speed) / this.vehicleManager.getMaxSpeed(); const speedFactor = Math.min(1, normalizedSpeed * 4); // Cap at 25% of max speed for full steering // Calculate rotation delta: steering * steeringAngle * speedFactor * deltaTime const steeringAngle = this.vehicleManager.steeringAngle; const rotationDelta = steering * steeringAngle * speedFactor * deltaTime; // Update target rotation this.targetVehicleRotation = currentRotation + rotationDelta; } // Apply the calculated rotation to the vehicle const vehicleRotation = this.targetVehicleRotation || 0; // Track following logic if (this.trackGenerator && this.trackGenerator.trackCurve) { // Find the closest point on the track to our current position const vehicleVector = new THREE.Vector3(vehiclePosition.x, vehiclePosition.y, vehiclePosition.z); const closestPoint = this.trackGenerator.getClosestPointOnCurve(vehicleVector); // If vehicle is too far from track, apply corrective force const maxTrackDistance = this.trackGenerator.trackData.trackWidth / 1.5; if (closestPoint.distance > maxTrackDistance) { // Calculate direction towards track center const dirToTrack = new THREE.Vector3().subVectors( closestPoint.point, vehicleVector ).normalize(); // Apply correction force - stronger the further away we are const correctionFactor = 0.2 * (closestPoint.distance / maxTrackDistance); vehiclePosition.x += dirToTrack.x * correctionFactor * Math.abs(speed); vehiclePosition.z += dirToTrack.z * correctionFactor * Math.abs(speed); // Keep y position at track height with small hover offset vehiclePosition.y = closestPoint.point.y + 0.5; } else { // Keep y position at track height with small hover offset when on track vehiclePosition.y = closestPoint.point.y + 0.5; } // Update vehicle position with the calculated position this.vehicleManager.setVehiclePosition(vehiclePosition.x, vehiclePosition.y, vehiclePosition.z); } // Explicitly pass rotation to vehicle manager to ensure sync if (vehicle) { this.vehicleManager.setVehicleRotation(0, vehicleRotation); // Enhanced F-Zero-like hover effect const hoverFrequency = 2.5; const hoverAmplitude = 0.08; const hoverHeight = hoverAmplitude + Math.sin(this.clock.elapsedTime * hoverFrequency) * (hoverAmplitude * 0.5); vehicle.position.y = vehiclePosition.y + hoverHeight; } // Camera tilt for a consistent viewing experience const maxCameraTilt = 10; // Increased from 6 to 10 for more dramatic tilt const cameraTiltSpeed = 3.0; // Increased from 1.5 for faster tilt transition const smoothTilt = this.currentSteering || 0; const vehicleSpeedMPH = this.vehicleManager.getSpeedMPH(); const maxSpeedMPH = this.vehicleManager.getMaxSpeedMPH(); const speedFactor = Math.min(Math.abs(vehicleSpeedMPH) / maxSpeedMPH, 1); const tiltSpeedAdjustment = 1 - (speedFactor * 0.3); const targetCameraTilt = smoothTilt * maxCameraTilt * speedFactor * tiltSpeedAdjustment; this.currentCameraTilt = this.currentCameraTilt || 0; this.currentCameraTilt += (targetCameraTilt - this.currentCameraTilt) * cameraTiltSpeed * deltaTime; // Enhanced camera positioning for better turn visibility const cameraHeightMultiplier = 0.8; // Lower camera for more dramatic angles const adjustedCameraHeight = this.cameraHeight * cameraHeightMultiplier; const followDistance = GAME_CONFIG.camera.followDistance * 0.7; // Closer to vehicle for more dynamic feel // Enhanced elevation handling // Get current track height at vehicle position let heightAdjustment = 0; if (this.trackGenerator && this.trackGenerator.trackCurve) { // Calculate current position on track const vehiclePosition = this.vehicleManager.getVehiclePosition(); const vehicleVector = new THREE.Vector3(vehiclePosition.x, vehiclePosition.y, vehiclePosition.z); const closestPoint = this.trackGenerator.getClosestPointOnCurve(vehicleVector); // Get track's elevation at vehicle position heightAdjustment = closestPoint.point.y - vehiclePosition.y; // Look ahead for upcoming elevation changes const lookAheadT = Math.min(1, closestPoint.t + 0.05); // Look ahead on track const upcomingPoint = this.trackGenerator.trackCurve.getPointAt(lookAheadT); const upcomingElevation = upcomingPoint.y - vehiclePosition.y; // Use the larger elevation change to prepare camera heightAdjustment = Math.max(heightAdjustment, upcomingElevation); } // Enhanced dynamic camera positioning with turn anticipation const vehicleObj = this.vehicleManager.getVehicle(); const vehicleDirection = vehicleObj ? vehicleObj.rotation.y : 0; const currentSteering = this.vehicleManager.getSteering(); // Dynamic camera parameters that respond to steering const steeringFactor = Math.abs(currentSteering) * 0.5; const cameraFixedHeight = this.cameraHeight * (0.7 - steeringFactor * 0.1); // Higher camera height for better overview const cameraFixedDistance = 3.7 + steeringFactor * 1.5; // Increased by another 15% for more distance // Dynamic shift calculations for cornering const steeringAmount = this.vehicleManager.getSteering(); const maxShift = 1.2; // Increased from 0.7 for more lateral movement const steeringCurve = Math.pow(Math.abs(steeringAmount), 2.0); // Increased exponent from 1.8 for more pronounced effect at sharper turns // Adjust shift based on speed in MPH const speedBasedShift = Math.min(1, vehicleSpeedMPH / 100) * 0.3 + 0.7; const shiftFactor = steeringCurve * maxShift * speedBasedShift; // Introduce camera lag for smoother transitions const lagFactor = 0.08; this.cameraOffset = this.cameraOffset || new THREE.Vector3(); // Calculate target offset const targetOffsetX = -Math.sin(vehicleDirection) * cameraFixedDistance + Math.cos(vehicleDirection) * shiftFactor * Math.sign(steeringAmount); const targetOffsetZ = -Math.cos(vehicleDirection) * cameraFixedDistance - Math.sin(vehicleDirection) * shiftFactor * Math.sign(steeringAmount); // Smoothly interpolate camera offset this.cameraOffset.x += (targetOffsetX - this.cameraOffset.x) * lagFactor; this.cameraOffset.z += (targetOffsetZ - this.cameraOffset.z) * lagFactor; // Create a stable camera position with damping const updatedVehiclePosition = this.vehicleManager.getVehiclePosition(); // Store previous camera position for smoother transitions this.previousCameraPosition = this.previousCameraPosition || new THREE.Vector3( updatedVehiclePosition.x + this.cameraOffset.x, updatedVehiclePosition.y + cameraFixedHeight, updatedVehiclePosition.z + this.cameraOffset.z ); // Calculate target camera position const targetCameraPosition = new THREE.Vector3( updatedVehiclePosition.x + this.cameraOffset.x, updatedVehiclePosition.y + cameraFixedHeight, updatedVehiclePosition.z + this.cameraOffset.z ); // Vertical damping system for elevation changes this.cameraVerticalVelocity = this.cameraVerticalVelocity || 0; this.previousVehicleHeight = this.previousVehicleHeight || updatedVehiclePosition.y; // Calculate height change rate const heightDelta = updatedVehiclePosition.y - this.previousVehicleHeight; this.previousVehicleHeight = updatedVehiclePosition.y; // Apply vertical damping to reduce bouncing const heightChangeThreshold = 0.05; const springStrength = 2.0; const dampingFactor = 0.85; if (Math.abs(heightDelta) > heightChangeThreshold) { this.cameraVerticalVelocity = this.cameraVerticalVelocity * dampingFactor + heightDelta * (1.0 - dampingFactor); } else { this.cameraVerticalVelocity *= 0.9; } // Calculate vertical offset using damped spring model const verticalOffset = -this.cameraVerticalVelocity * springStrength; // Apply vertical offset to target position targetCameraPosition.y += verticalOffset; // Calculate normalized speed for camera adjustments const normalizedSpeed = Math.abs(this.vehicleManager.getSpeed()) / this.vehicleManager.getMaxSpeed(); // Define fixed camera parameters const cameraDistance = 5.375; // Increased by 25% from 4.3 for more distance const lookAheadDistance = 4.0; // Increased look-ahead distance for better forward view // Camera shift effect for turns const steeringForCamera = this.vehicleManager.getSteering(); const maxCameraShiftAngle = 15; const cameraShiftSpeed = 3.5; // Initialize camera angle shift this.currentCameraShiftAngle = this.currentCameraShiftAngle || 0; // Calculate target camera shift angle based on steering const targetCameraShiftAngle = steeringForCamera * maxCameraShiftAngle * speedFactor; // Smoothly interpolate camera shift angle this.currentCameraShiftAngle += (targetCameraShiftAngle - this.currentCameraShiftAngle) * cameraShiftSpeed * deltaTime; // Convert angle to radians for calculation const cameraShiftRadians = THREE.MathUtils.degToRad(this.currentCameraShiftAngle); // Adjust base camera position to shift sideways during turns const lateralShiftDistance = 0.8; // Reduced for closer lateral shift const lateralShift = Math.sin(cameraShiftRadians) * lateralShiftDistance; // Calculate shifted camera distance - pulled back further from previous setting const closerCameraDistance = 5.375; // Increased by 25% from 4.3 for more distance const shiftedCameraDistance = closerCameraDistance * Math.cos(cameraShiftRadians); // Calculate camera position with lateral shift const cameraX = vehiclePosition.x - Math.sin(vehicleDirection) * shiftedCameraDistance + Math.cos(vehicleDirection) * lateralShift; const cameraZ = vehiclePosition.z - Math.cos(vehicleDirection) * shiftedCameraDistance - Math.sin(vehicleDirection) * lateralShift; const cameraY = vehiclePosition.y + this.cameraHeight * 0.8; // Slightly higher camera for better overview with increased distance // Calculate vertical shift for better visibility during turns const verticalShiftAmount = 0.3; // Reduced for less extreme camera movement const verticalShift = Math.abs(this.currentCameraShiftAngle) / maxCameraShiftAngle * verticalShiftAmount; // --- Apply Mouse Offsets --- const baseCameraPosition = new THREE.Vector3(cameraX, cameraY + verticalShift, cameraZ); // Calculate vector from vehicle to the calculated camera position (using updatedVehiclePosition from line 638) const relativeCamPos = new THREE.Vector3().subVectors(baseCameraPosition, updatedVehiclePosition); // Create rotation quaternion from mouse offsets (Yaw first, then Pitch) const offsetQuaternion = new THREE.Quaternion().setFromEuler( new THREE.Euler(this.cameraPitchOffset, this.cameraYawOffset, 0, 'YXZ') ); // Rotate the relative camera position vector relativeCamPos.applyQuaternion(offsetQuaternion); // Calculate the final camera position const finalCameraPosition = new THREE.Vector3().copy(updatedVehiclePosition).add(relativeCamPos); // Set final camera position this.camera.position.copy(finalCameraPosition); // --- End Apply Mouse Offsets --- // Calculate look-ahead reduction during turns const lookAheadReduction = Math.abs(this.currentCameraShiftAngle) / maxCameraShiftAngle * 0.3; const adjustedLookAheadDistance = 4.0 * (1 - lookAheadReduction); // Increased for better forward visibility with farther camera // Calculate look-at point - point closer to the vehicle const lookAtX = vehiclePosition.x + Math.sin(vehicleDirection) * adjustedLookAheadDistance; const lookAtZ = vehiclePosition.z + Math.cos(vehicleDirection) * adjustedLookAheadDistance; const lookAtY = vehiclePosition.y + 0.8; // Adjust look-at height slightly // Set camera to look at the adjusted vehicle position // This provides a stable anchor while the camera orbits this.camera.lookAt(updatedVehiclePosition.x, lookAtY, updatedVehiclePosition.z); } animate = () => { const deltaTime = this.clock.getDelta(); // Check if game is paused via gameManager if (this.gameManager && this.gameManager.isPaused) { // Only render the scene when paused, don't update game state this.renderer.render(this.scene, this.camera); this.animationFrameId = requestAnimationFrame(this.animate); return; } // Run animation callbacks if any exist if (this.scene.userData.animateCallbacks) { this.scene.userData.animateCallbacks.forEach(callback => callback(deltaTime)); } // No drag or friction is applied in the animate method // Completely removed all speed reduction code to ensure speed is never reduced during gameplay this.updateVehicle(deltaTime); // --- NaN Safeguard after updateVehicle --- const currentVehiclePos = this.vehicleManager?.getVehiclePosition(); if (!currentVehiclePos || !Number.isFinite(currentVehiclePos.x) || !Number.isFinite(currentVehiclePos.z)) { console.error(`NaN detected in vehicle position immediately after updateVehicle. Pos:`, currentVehiclePos, `Skipping rest of frame updates.`); // Request next frame but skip updates for this frame this.animationFrameId = requestAnimationFrame(this.animate); return; } // --- End NaN Safeguard --- // Send raw steering input back to App via callback if (this.controls && this.onSteeringUpdate) { this.onSteeringUpdate(this.controls.currentSteering); } this.updateCharacter(deltaTime); this.updateInfiniteGrid(); this.updateVisualEffects(); this.checkTrackBoundaries(); // This should now receive valid position data this.updateDynamicFOV(deltaTime); // Update AI Manager - Removed // if (this.aiManager) { // this.aiManager.update(deltaTime); // } // Update track-specific effects if (this.selectedTrackId === 'QuantumValley') { this.updateQuantumValleyEffects(deltaTime); } else if (this.selectedTrackId === 'NeonspireCircuit') { this.updateNeonspireEffects(deltaTime); } // Update track generator tool for start line animations if (this.trackGeneratorTool) { this.trackGeneratorTool.update(deltaTime); } // Update Propulsion Effect if (this.propulsionEffectManager && this.vehicleManager) { const speed = this.vehicleManager.getSpeed(); const isBoosting = this.controls ? this.controls.boosting : false; // Get boost status this.propulsionEffectManager.update(deltaTime, this.clock.elapsedTime, speed, isBoosting); } // Update Exhaust Effect if (this.exhaustEffectManager && this.vehicleManager) { const speed = this.vehicleManager.getSpeed(); // Get boost status reliably using the getter from ControlManager const boostData = this.controls ? this.controls.getBoostData() : { active: false }; const isBoosting = boostData.active; this.exhaustEffectManager.update(deltaTime, this.clock.elapsedTime, speed, isBoosting); } if (this.gameManager && this.gameManager.initialized) { this.gameManager.update(deltaTime); } // Update Debug Visualization if (this.debugVisualization) { this.debugVisualization.update(deltaTime); } this.renderer.render(this.scene, this.camera); this.animationFrameId = requestAnimationFrame(this.animate); } updateCharacter(deltaTime) { if (this.characterManager && this.vehicleManager && this.camera) { const vehiclePosition = this.vehicleManager.getVehiclePosition(); // Get steering value directly from controls for more responsive character tilting // This ensures we get the immediate steering input rather than the smoothed vehicle steering const steering = this.controls ? this.controls.currentSteering : this.vehicleManager.getSteering(); // Only update character when camera is available if (this.camera) { this.characterManager.updateCharacterPosition(this.camera, steering); // Debug logging for Dolphine character during the first 5 seconds if (this.selectedCharacterId === 'Dolphine' && this.clock.elapsedTime < 5) { const character = this.characterManager.getCharacter(); if (character) { console.log('Dolphine character position:', character.position); } } } } } updateDynamicFOV(deltaTime) { if (!this.vehicleManager) return; // Get current speed and calculate normalized speed (0-1) using MPH values const speedMPH = this.vehicleManager.getSpeedMPH(); const maxSpeedMPH = this.vehicleManager.getMaxSpeedMPH(); const normalizedSpeed = Math.min(1, Math.abs(speedMPH) / maxSpeedMPH); // Adjust FOV ranges based on device type let minFOV, maxFOV; if (this.deviceType === 'mobile') { // Mobile - slightly tighter FOV range for closer feeling minFOV = 65; maxFOV = 80; } else if (this.deviceType === 'tablet') { // Tablet - intermediate FOV range minFOV = 63; maxFOV = 78; } else { // Desktop - narrower FOV range for racing focus minFOV = 60; maxFOV = 75; } // Calculate target FOV - narrow FOV at high speeds to enhance sense of speed const targetFOV = minFOV + (maxFOV - minFOV) * normalizedSpeed; // Apply smooth transition to FOV change // Faster transition when accelerating, slower when decelerating const currentSpeedMPH = this.vehicleManager.getSpeedMPH(); const transitionSpeed = speedMPH > currentSpeedMPH ? 0.03 : 0.05; this.currentFOV += (targetFOV - this.currentFOV) * transitionSpeed; // Apply the FOV change to camera if (this.camera && Math.abs(this.camera.fov - this.currentFOV) > 0.01) { this.camera.fov = this.currentFOV; this.camera.updateProjectionMatrix(); } } updateVisualEffects() { // Update visual effects based on camera position and current scene state if (this.visualEffectsManager && this.gridSegments && this.gridSegments.length > 0) { // Pass gridSegments and camera position to visualEffectsManager this.visualEffectsManager.updateGridVisibility(this.gridSegments, this.camera.position); } } updateInfiniteGrid() { if (!this.gridSegments || !this.vehicleManager) return; const vehiclePosition = this.vehicleManager.getVehiclePosition(); const gridSize = 200; // Check each grid segment and reposition if necessary this.gridSegments.forEach(segment => { const dx = vehiclePosition.x - segment.position.x; const dz = vehiclePosition.z - segment.position.z; // Check if we need to reposition this grid segment // Use a larger threshold to reduce frequency of grid changes // This creates smoother transitions when traveling at high speeds if (Math.abs(dx) > gridSize * 2.5 || Math.abs(dz) > gridSize * 2.5) { // Calculate new grid position based on vehicle's current position // This creates a grid that always surrounds the vehicle const gridX = Math.round(vehiclePosition.x / gridSize) * gridSize; const gridZ = Math.round(vehiclePosition.z / gridSize) * gridSize; // Find the nearest available grid position around the vehicle // that isn't already occupied by another grid segment let newX = gridX; let newZ = gridZ; // Find positions in a spiral pattern around the vehicle // Expanded search radius to 3 for greater coverage const positions = []; for (let r = 0; r <= 3; r++) { for (let i = -r; i <= r; i++) { for (let j = -r; j <= r; j++) { // Skip positions that aren't on the edge of the spiral if (r > 0 && Math.abs(i) < r && Math.abs(j) < r) continue; positions.push({ x: gridX + i * gridSize, z: gridZ + j * gridSize }); } } } // Find the first position that's not occupied let found = false; for (const pos of positions) { if (!this.isGridPositionOccupied(pos.x, pos.z, segment)) { newX = pos.x; newZ = pos.z; found = true; break; } } if (found) { // Enhanced transitions with improved visual effects const prevOpacity = segment.material.opacity; segment.material.opacity = 0; segment.position.set(newX, 0.1, newZ); // More refined fade-in animation const fadeIn = () => { if (segment.material.opacity < prevOpacity) { segment.material.opacity += 0.03; requestAnimationFrame(fadeIn); } }; fadeIn(); } } }); } isGridPositionOccupied(x, z, excludeSegment) { return this.gridSegments.some(segment => segment !== excludeSegment && Math.abs(segment.position.x - x) < 10 && Math.abs(segment.position.z - z) < 10 ); } createFloor() { // No longer creating the solid floor mesh, keeping only the grid // Create multiple grid segments that will be repositioned this.gridSegments = []; const gridSize = 300; // Increased grid size for larger coverage area const gridCount = 16; // Doubled number of grid segments for much greater coverage // Create a 4x4 grid around the player's starting position for extended view distance for (let x = -2; x <= 1; x++) { for (let z = -2; z <= 1; z++) { // Create grid with enhanced visual appearance const grid = new THREE.GridHelper(gridSize, 60, 0x00aaff, 0x004488); // Make the grid lines glow with higher visibility grid.material.transparent = true; grid.material.opacity = 0.5; grid.material.blending = THREE.AdditiveBlending; grid.position.set(x * gridSize, 0.1, z * gridSize); this.scene.add(grid); this.gridSegments.push(grid); this.objects.push(grid); } } } disposeObject(object) { if (!object) return; if (object.geometry) { object.geometry.dispose(); } if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } } updateNeonspireEffects(deltaTime) { if (this.vehicleManager && this.scene.fog) { const position = this.vehicleManager.getVehiclePosition(); // Create pulsing fog effect let fogDensity = 0.0020 + Math.sin(this.clock.elapsedTime * 0.5) * 0.0004; fogDensity = Math.max(0.0015, Math.min(0.0025, fogDensity)); if (this.scene.fog.isFogExp2) { this.scene.fog.density = fogDensity; } // Shift fog color slightly over time for a dynamic neon effect const fogColor = new THREE.Color(); const baseColor = new THREE.Color(0x120030); const accentColor = new THREE.Color(0x220060); const colorPulse = (Math.sin(this.clock.elapsedTime * 0.3) + 1) * 0.5; fogColor.lerpColors(baseColor, accentColor, colorPulse); this.scene.fog.color.copy(fogColor); this.scene.background.copy(new THREE.Color().lerpColors( new THREE.Color(0x080018), new THREE.Color(0x100030), colorPulse )); } } updateQuantumValleyEffects(deltaTime) { if (this.vehicleManager && this.scene.fog) { // Create an advanced atmospheric fog effect const position = this.vehicleManager.getVehiclePosition(); // Pulse the fog with a slower rhythm for a quantum effect let fogDensity = 0.0015 + Math.sin(this.clock.elapsedTime * 0.3) * 0.0006; fogDensity = Math.max(0.001, Math.min(0.003, fogDensity)); if (this.scene.fog instanceof THREE.FogExp2) { this.scene.fog.density = fogDensity; } else { // Convert to FogExp2 if not already this.scene.fog = new THREE.FogExp2(0x001050, fogDensity); } // Shift fog color for quantum effect (blue-cyan spectrum) const fogColor = new THREE.Color(); const baseColor = new THREE.Color(0x001050); const accentColor = new THREE.Color(0x0080a0); const colorPulse = (Math.sin(this.clock.elapsedTime * 0.2) + 1) * 0.5; fogColor.lerpColors(baseColor, accentColor, colorPulse); this.scene.fog.color.copy(fogColor); this.scene.background.copy(new THREE.Color().lerpColors( new THREE.Color(0x000520), new THREE.Color(0x001040), colorPulse )); // Quantum particle effects would be added here if we had a particle system // Dynamic ambient light color this.scene.children.forEach(child => { if (child.isAmbientLight) { child.color.lerpColors( new THREE.Color(0x2040ff), new THREE.Color(0x00ffff), colorPulse ); } }); } } disposeGameComponents() { if (this.controls) { this.controls.dispose(); this.controls = null; } if (this.vehicleManager) { this.vehicleManager.dispose(); this.vehicleManager = null; } } disposeRenderer() { if (this.renderer && this.mountRef && this.mountRef.contains(this.renderer.domElement)) { this.mountRef.removeChild(this.renderer.domElement); this.renderer.dispose(); this.renderer = null; } } checkTrackBoundaries() { if (!this.trackGenerator || !this.vehicleManager) return; const vehiclePos = this.vehicleManager.getVehiclePosition(); // --- Initial check for vehiclePos validity --- if (!vehiclePos || !Number.isFinite(vehiclePos.x) || !Number.isFinite(vehiclePos.y) || !Number.isFinite(vehiclePos.z)) { console.error("Invalid vehiclePos received from VehicleManager:", vehiclePos); return; // Skip boundary check this frame } // --- End Initial check --- const vehiclePosition = new THREE.Vector3( vehiclePos.x, vehiclePos.y, vehiclePos.z ); // Early exit if vehicle has no position (redundant with above check, but safe) if (!vehiclePosition) return; // Get closest point once and reuse it const closestPoint = this.trackGenerator.getClosestPointOnCurve(vehiclePosition); // --- Check closestPoint validity --- if (!closestPoint || !closestPoint.point || !Number.isFinite(closestPoint.point.x) || !Number.isFinite(closestPoint.point.y) || !Number.isFinite(closestPoint.point.z) || !Number.isFinite(closestPoint.distance) || !Number.isFinite(closestPoint.t)) { console.error("Invalid closestPoint received from TrackGenerator:", closestPoint); return; // Skip boundary check this frame } // --- End Check closestPoint validity --- const maxTrackDistance = this.trackGenerator.trackData.trackWidth * 0.5; // Simplified threshold // Get vehicle speed for physics-based bounces const vehicleSpeed = this.vehicleManager.getSpeed(); const speedMPH = this.vehicleManager.getSpeedMPH(); const maxSpeedMPH = this.vehicleManager.getMaxSpeedMPH(); const normalizedSpeed = Math.min(1, Math.abs(speedMPH) / maxSpeedMPH); // Check boundary with single comparison if (closestPoint.distance > maxTrackDistance) { // --- Forcefield Boundary --- // Calculate how far the vehicle has penetrated the boundary const penetration = closestPoint.distance - maxTrackDistance; // --- PRE-CALCULATION SAFEGUARD --- // Ensure both points are valid before subtraction // Ensure both points are valid before subtraction (Redundant with earlier checks, but safe) if (!Number.isFinite(closestPoint.point.x) || !Number.isFinite(closestPoint.point.y) || !Number.isFinite(closestPoint.point.z) || !Number.isFinite(vehiclePosition.x) || !Number.isFinite(vehiclePosition.y) || !Number.isFinite(vehiclePosition.z)) { console.error("Invalid point data before calculating rawInwardDirection (Final Check):", { closestPoint: closestPoint.point, vehiclePosition }); return; // Skip correction this frame } // --- END PRE-CALCULATION SAFEGUARD --- // Calculate the raw direction vector pointing from the vehicle back towards the track center const rawInwardDirection = new THREE.Vector3().subVectors(closestPoint.point, vehiclePosition); // Safeguard: Check if the direction vector has a valid length before normalizing if (rawInwardDirection.lengthSq() < 0.0001) { // Use lengthSq for efficiency, check against a small epsilon console.warn("Skipping forcefield correction: rawInwardDirection length is too small."); // Optional: Apply a small default speed reduction anyway // if (speedMPH > 20) this.vehicleManager.setSpeed(vehicleSpeed * 0.9); } else { const inwardDirection = rawInwardDirection.normalize(); // Normalize ONLY if length is sufficient // --- Additional Safeguard --- if (!Number.isFinite(inwardDirection.x) || !Number.isFinite(inwardDirection.y) || !Number.isFinite(inwardDirection.z)) { // Check all components console.warn("Invalid inwardDirection after normalization:", inwardDirection); return; // Skip correction if direction is invalid } // Define the strength of the corrective push (tune this value) const forceStrength = 0.8; // Increase for a stronger push // Calculate the correction amount based on penetration and strength const correctionMagnitude = penetration * forceStrength; // --- Additional Safeguard --- if (!Number.isFinite(correctionMagnitude)) { console.warn("Invalid correctionMagnitude calculated:", { penetration, forceStrength }); return; // Skip correction if magnitude is invalid } // Calculate the correction vector (only apply horizontally) const correctionX = inwardDirection.x * correctionMagnitude; const correctionZ = inwardDirection.z * correctionMagnitude; // --- Final Safeguard before applying --- // Check vehiclePos validity as well if (!Number.isFinite(vehiclePos.x) || !Number.isFinite(vehiclePos.z) || // Check source pos !Number.isFinite(correctionX) || !Number.isFinite(correctionZ)) { // Check calculated correction console.error("Invalid values before calculating final corrected position:", { vehiclePos, correctionX, correctionZ }); return; // Skip if any component is invalid } // Apply the correction additively to the vehicle's current position const correctedX = vehiclePos.x + correctionX; const correctedY = vehiclePos.y; // Keep current height! const correctedZ = vehiclePos.z + correctionZ; // Final check on the result (redundant but safe) if (Number.isFinite(correctedX) && Number.isFinite(correctedY) && Number.isFinite(correctedZ)) { this.vehicleManager.setVehiclePosition(correctedX, correctedY, correctedZ); // Apply speed reduction penalty for hitting the boundary if (speedMPH > 20) { const speedReduction = 0.75 - (normalizedSpeed * 0.2); // Reduce speed by 25% up to 45% at max speed this.vehicleManager.setSpeed(vehicleSpeed * speedReduction); } } else { // This should ideally not be reached anymore with the previous checks console.error("Invalid forcefield correction calculated AFTER ALL safeguards, skipping push:", { x: correctedX, y: correctedY, z: correctedZ }); } } // --- End Forcefield Boundary --- } else { // Ensure vehicle stays on track height even when within bounds // (This might be redundant if updateVehicle already does this, but ensures floor collision) const targetYOnTrack = closestPoint.point.y + 0.5; // Use the hover height if (Math.abs(vehiclePos.y - targetYOnTrack) > 0.01) { // Only update if significantly different // Check if targetYOnTrack is valid before setting if (Number.isFinite(targetYOnTrack)) { this.vehicleManager.setVehiclePosition(undefined, targetYOnTrack, undefined); } else { console.warn("Invalid targetYOnTrack calculated within bounds:", targetYOnTrack); } } } // Check for finish line collision using enhanced properties if (this.trackGenerator?.finishLine) { // Optional chaining for safety const finishLine = this.trackGenerator.finishLine; // Calculate vector from vehicle to finish line const vehicleToFinish = new THREE.Vector3().subVectors( vehiclePosition, finishLine.position ); // Ensure finishLine.forward is a valid vector before dot product if (!finishLine.forward || !Number.isFinite(finishLine.forward.x)) { console.error("Invalid finishLine.forward vector:", finishLine.forward); return; // Skip finish line check this frame } // Project vehicle position onto finish line plane const projectionDistance = vehicleToFinish.dot(finishLine.forward); const projectedPoint = new THREE.Vector3().copy(finishLine.position) .addScaledVector(finishLine.forward, projectionDistance); // === New Frame-Crossing Detection Logic === // Check if the vehicle crossed the finish line plane since the last frame // projectionDistance: negative behind plane, positive in front of plane // We care if it went from negative/zero to positive while moving forward const justCrossed = this.previousProjectionDistance !== null && this.previousProjectionDistance <= 0 && // Was behind or on the line projectionDistance > 0 && // Is now in front of the line this.vehicleManager.getSpeed() > 0; // Must be moving forward // console.log(`[FinishLineDebug] Frame Check: prevDist=${this.previousProjectionDistance?.toFixed(3)}, currDist=${projectionDistance.toFixed(3)}, speed=${this.vehicleManager.getSpeed().toFixed(2)}, justCrossed=${justCrossed}`); // Less verbose logging if (justCrossed) { // console.log(`[FinishLineDebug] Plane crossed!`); // Less verbose logging // Ensure finishLine.right is valid before dot product if (!finishLine.right || !Number.isFinite(finishLine.right.x)) { console.error("Invalid finishLine.right vector:", finishLine.right); return; // Skip finish line check this frame } // Calculate lateral position relative to finish line AT THE MOMENT OF CROSSING const lateralOffset = new THREE.Vector3().copy(vehiclePosition) .sub(projectedPoint) // Use projected point on the plane .dot(finishLine.right); // Check if within track width when crossing occurred // console.log(`[FinishLineDebug] Crossing Check: lateralOffset=${lateralOffset.toFixed(2)}, requiredWidth=${(finishLine.width * 0.5).toFixed(2)}`); // Less verbose logging if (Math.abs(lateralOffset) < finishLine.width * 0.5) { // console.log(`[FinishLineDebug] Lateral check PASSED.`); // Less verbose logging if (this.gameManager) { const lapData = this.gameManager.handleLapCompletion(); // console.log(`[FinishLineDebug] gameManager.handleLapCompletion() returned:`, lapData); // Less verbose logging if (lapData) { // console.log("[FinishLineDebug] Finish Line Crossed & Lap Data Valid"); // Less verbose logging console.log("Race completed with data:", lapData); // The 'onRaceComplete' callback passed into GameManager should handle triggering the UI update. if(this.onRaceComplete) { this.onRaceComplete(lapData); // Call the callback passed from App.js } else { console.warn("onRaceComplete callback is missing in ThreeScene."); } } else { // console.log("[FinishLineDebug] Lap Data returned was invalid/null."); // Less verbose logging } } else { console.warn("[FinishLineDebug] gameManager not available for lap completion."); } } else { // console.log(`[FinishLineDebug] Lateral check FAILED.`); // Less verbose logging } } // Update previous projection distance for the next frame, ONLY if it's a valid number if (Number.isFinite(projectionDistance)) { this.previousProjectionDistance = projectionDistance; } else { // Reset if invalid to avoid issues on the next frame console.warn("Invalid projectionDistance calculated, resetting previousProjectionDistance."); this.previousProjectionDistance = null; } // === End of New Logic === } } detectDeviceType() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; // Check for mobile devices if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase())) { // Determine if tablet based on screen size return window.innerWidth >= 768 ? 'tablet' : 'mobile'; } // If touch is supported but not mobile, probably tablet if ('ontouchstart' in window && window.innerWidth >= 768) { return 'tablet'; } // Default to desktop return 'desktop'; } // Removed showCompletionScreen method - logic moved to CompletionScreenManager // Removed showLeaderboard method - logic moved to CompletionScreenManager dispose() { if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; } // Completion Screen Manager cleanup removed // Clean up game manager if (this.gameManager) { this.gameManager.dispose(); this.gameManager.dispose(); this.gameManager = null; } // Clean up visual effects manager if (this.visualEffectsManager) { this.visualEffectsManager.dispose(); this.visualEffectsManager = null; } // Clean up character manager if (this.characterManager) { this.characterManager.dispose(); this.characterManager = null; } // Clean up track if (this.trackGeneratorTool) { this.trackGeneratorTool.dispose(); this.trackGeneratorTool = null; } if (this.trackGenerator) { this.trackGenerator.dispose(); this.trackGenerator = null; } // Dispose AI Manager - Removed // if (this.aiManager) { // this.aiManager.dispose(); // this.aiManager = null; // } // Dispose Propulsion Effect Manager if (this.propulsionEffectManager) { // Remove meshes from scene before disposing manager this.propulsionEffectManager.meshes.forEach(mesh => { if(this.scene) { this.scene.remove(mesh); } }); this.propulsionEffectManager.dispose(); this.propulsionEffectManager = null; } // Dispose Exhaust Effect Manager if (this.exhaustEffectManager) { // Remove meshes from scene before disposing manager this.exhaustEffectManager.meshes.forEach(mesh => { if(this.scene) { this.scene.remove(mesh); } }); this.exhaustEffectManager.dispose(); this.exhaustEffectManager = null; } // Dispose Debug Visualization if (this.debugVisualization) { this.debugVisualization.dispose(); this.debugVisualization = null; } window.removeEventListener('resize', this.handleResize); // Remove mouse listeners on dispose if (this.renderer && this.renderer.domElement) { this.renderer.domElement.removeEventListener('mousedown', this.handleMouseDown); this.renderer.domElement.removeEventListener('mouseup', this.handleMouseUp); this.renderer.domElement.removeEventListener('mousemove', this.handleMouseMove); this.renderer.domElement.removeEventListener('mouseleave', this.handleMouseUp); } this.disposeGameComponents(); // Clean up tracked objects this.objects.forEach(object => { if (object && this.scene) { this.scene.remove(object); this.disposeObject(object); } }); this.objects = []; // Clean up lightShafts if it exists if (this.lightShafts && this.scene) { this.scene.remove(this.lightShafts); this.disposeObject(this.lightShafts); this.lightShafts = null; } // Clean up grids if (this.gridSegments) { this.gridSegments.forEach(grid => { if (grid && this.scene) { this.scene.remove(grid); } }); this.gridSegments = []; } // Clean up any remaining objects in the scene if (this.scene) { this.scene.traverse(object => { this.disposeObject(object); }); this.scene = null; } this.disposeRenderer(); // Clean up game UI element - Removed as it's no longer directly managed here // if (this.gameUIElement && this.mountRef && this.mountRef.contains(this.gameUIElement)) { // ReactDOM.unmountComponentAtNode(this.gameUIElement); // this.mountRef.removeChild(this.gameUIElement); // this.gameUIElement = null; // } } updateVehiclePositionOnTrack(position) { if (this.trackGenerator && this.trackGenerator.trackCurve) { const closestPoint = this.trackGenerator.getClosestPointOnCurve(position); if (closestPoint) { // Adjust the vehicle's y position to match the track height this.vehicleManager.setVehiclePosition( position.x, closestPoint.point.y + 0.5, // Keep a small offset to prevent clipping position.z ); } } } // Removed Integrated Completion Screen Methods (ensureSupabaseClient is now handled within CompletionScreenManager) // --- Mouse Control Handlers --- handleMouseDown = (event) => { this.isMouseDown = true; this.previousMousePosition.x = event.clientX; this.previousMousePosition.y = event.clientY; }; handleMouseUp = () => { this.isMouseDown = false; }; handleMouseMove = (event) => { if (!this.isMouseDown) return; const deltaX = event.clientX - this.previousMousePosition.x; const deltaY = event.clientY - this.previousMousePosition.y; // Sensitivity factor for mouse movement const sensitivity = 0.002; // Update camera offsets (Yaw = horizontal, Pitch = vertical) // Invert deltaY because moving mouse up should look up (decrease pitch) this.cameraYawOffset -= deltaX * sensitivity; this.cameraPitchOffset -= deltaY * sensitivity; // Clamp vertical pitch to avoid flipping upside down this.cameraPitchOffset = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, this.cameraPitchOffset)); this.previousMousePosition.x = event.clientX; this.previousMousePosition.y = event.clientY; }; // --- End Mouse Control Handlers --- }