import * as THREE from 'three'; import { GLTFLoader } from 'https://esm.sh/three@0.171.0/examples/jsm/loaders/GLTFLoader.js'; import { Sky } from 'https://esm.sh/three@0.171.0/examples/jsm/objects/Sky.js'; import { StarsSystem } from 'StarsSystem'; import { TimeController } from 'TimeController'; import { PostProcessingSystem } from 'PostProcessingSystem'; import { CrystalSystem } from 'CrystalSystem'; export class ThreeScene { constructor(mountRef) { this.mountRef = mountRef; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.baseFOV = 75; // Store the base FOV value this.maxFOVBoost = 10; // Maximum FOV increase during boost // Detect mobile devices for performance optimizations this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768; // Configure renderer with mobile-specific optimizations this.renderer = new THREE.WebGLRenderer({ antialias: !this.isMobile, // Disable antialiasing on mobile powerPreference: "high-performance" }); this.terrainChunks = []; this.chunkSize = 100; // Reduce visible chunks on mobile this.baseChunksVisibleDistance = this.isMobile ? 2 : 3; this.maxChunksVisibleDistance = this.isMobile ? 4 : 8; this.chunksVisibleInDistance = this.baseChunksVisibleDistance; // Will be dynamically updated this.minAltitudeForMaxRender = 40; // Reduced from 50 to 40 to reach max render distance sooner this.spaceship = null; this.clock = new THREE.Clock(); this.keys = {}; this.particles = []; // Reduce particle count on mobile for performance this.maxParticles = this.isMobile ? 80 : 200; // Significantly fewer particles on mobile this.speed = 0.2; this.turnSpeed = 0.03; this.maxSpeed = 0.5; this.boostMaxSpeed = 0.8; // Maximum speed when boosting this.acceleration = 0.005; this.boostAcceleration = 0.01; // Faster acceleration when boosting this.deceleration = 0.01; this.currentSpeed = 0; this.tiltAmount = 0.2; // For banking on turns this.isBoosting = false; // Track if boost is active this.boostEnergy = 100; // Energy for boosting (0-100) this.boostEnergyMax = 100; this.boostEnergyRegenRate = 0.2; // How fast energy recharges this.boostEnergyCostRate = 0.8; // How fast energy depletes during boost // Score tracking this.score = 0; this.crystalsCollected = 0; // Property to store the current sun elevation in degrees // Will be used by other systems like stars this.sunElevation = 90; // Initialize at noon (90 degrees) } init(updateFlightData) { this.updateFlightData = updateFlightData; // Initial setup // Initial setup with mobile optimizations // Limit pixel ratio on mobile devices to improve performance this.renderer.setPixelRatio(this.isMobile ? Math.min(1.5, window.devicePixelRatio) : window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.outputColorSpace = THREE.SRGBColorSpace; // Updated from deprecated outputEncoding this.mountRef.current.appendChild(this.renderer.domElement); // Initialize post-processing system this.initPostProcessing(); // Setup scene this.setupEnvironment(); this.setupLights(); // Slightly reduced fog density and changed color to match sky better this.scene.fog = new THREE.FogExp2(0xd8e8ff, 0.00015); // Initialize time controller this.timeController = new TimeController(this.scene); if (this.onTimeControllerCreated) { this.onTimeControllerCreated(this.timeController); } this.setupTerrainSystem(); this.loadSpaceship(); // Initialize crystal system this.initCrystalSystem(); // Camera position // We'll set the camera position in updateSpaceshipControls this.camera.position.set(0, 10, 20); this.handleResize(); window.addEventListener('resize', this.handleResize.bind(this)); window.addEventListener('keydown', this.handleKeyDown.bind(this)); window.addEventListener('keyup', this.handleKeyUp.bind(this)); this.animate(); return () => this.cleanup(); } handleResize() { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); this.renderer.setPixelRatio(pixelRatio); // Resize post-processing composer if it exists if (this.postProcessing) { this.postProcessing.resize(width, height); } } animate() { requestAnimationFrame(this.animate.bind(this)); const delta = this.clock.getDelta(); // Update TimeController if it exists if (this.timeController) { // Only update time controller once per frame this.timeController.update(); // Get the current sun elevation based on time of day this.updateSkyForTimeOfDay(); } // Update crystal animations if (this.crystalSystem) { const time = this.clock.getElapsedTime(); this.crystalSystem.update(time); // Check for crystal collisions if spaceship exists if (this.spaceship) { this.checkCrystalCollisions(); // Update animations for collected crystals this.updateCrystalAnimations(delta); } } // Update spaceship position and rotation based on keyboard input if (this.spaceship) { this.updateSpaceshipControls(delta); // Update and remove expired particles this.updateParticles(delta); // Calculate flight data and send it to React component if (this.updateFlightData) { // Convert spaceship speed to km/h for display const speedKmh = this.calculateCurrentSpeed() * 36; // Convert units/frame to km/h // Calculate heading in degrees (0-360) const heading = ((this.spaceship.rotation.y * (180/Math.PI)) + 180) % 360; // Send data to React component const flightData = { speed: speedKmh, altitude: this.spaceship.position.y, heading: heading, boostEnergy: this.boostEnergy, isBoosting: this.isBoosting, renderDistance: this.chunksVisibleInDistance }; this.updateFlightData(flightData); this.prevFlightData = flightData; } } // Check if we need to update terrain chunks if (this.spaceship) { this.updateTerrainChunks(); } // Update stars system with current sun elevation if (this.starsSystem) { this.starsSystem.update(this.sunElevation); } // Update post-processing effects if available if (this.postProcessing) { // Update post-processing effects with current speed and ship position this.postProcessing.updateEffects({ speed: this.calculateCurrentSpeed() * 36, // Convert to km/h like displayed in UI isBoosting: this.isBoosting, shipPosition: this.spaceship ? this.spaceship.position : null // Pass ship position for DOF focus }); // Render with post-processing this.postProcessing.render(); } else { // Fallback to standard rendering if post-processing not initialized this.renderer.render(this.scene, this.camera); } } setupEnvironment() { // Create and configure the Sky object this.sky = new Sky(); this.sky.scale.setScalar(450000); this.scene.add(this.sky); // Set initial sun position (90 degrees elevation, 180 degrees azimuth) const sunPosition = new THREE.Vector3().setFromSphericalCoords( 1, THREE.MathUtils.degToRad(90), THREE.MathUtils.degToRad(180) ); // Configure sky parameters for desert atmosphere const uniforms = this.sky.material.uniforms; uniforms.sunPosition.value.copy(sunPosition); uniforms.turbidity.value = 3; // Much lower turbidity for deeper blue sky uniforms.rayleigh.value = 0.8; // Lower rayleigh for deeper, more saturated blue uniforms.mieCoefficient.value = 0.0015; // Further reduced for smaller, more defined sun uniforms.mieDirectionalG.value = 0.85; // Higher value for sharper sun definition // Load HDRI for environment lighting only (not background) const pmremGenerator = new THREE.PMREMGenerator(this.renderer); pmremGenerator.compileEquirectangularShader(); const textureLoader = new THREE.TextureLoader(); textureLoader.load("https://play.rosebud.ai/assets/DaySkyHDRI026A_4K-TONEMAPPED.jpg?lnqt", (hdriTexture) => { const envMap = pmremGenerator.fromEquirectangular(hdriTexture).texture; this.scene.environment = envMap; // Use processed HDRI for lighting only pmremGenerator.dispose(); }); // Initialize stars system this.starsSystem = new StarsSystem(this.scene); this.starsSystem.init(); } updateSkyForTimeOfDay() { if (!this.sky || !this.timeController) return; // Get current time of day from TimeController (0 to 2*PI) const timeOfDay = this.timeController.timeOfDay; // Calculate sun elevation based on time of day // Convert from time angle to elevation angle: // - At 0/2π (midnight): sun is at -90 degrees (below horizon) // - At π/2 (6:00): sun is at 0 degrees (horizon) // - At π (noon): sun is at 90 degrees (directly overhead) // - At 3π/2 (18:00): sun is at 0 degrees (horizon) // Calculate elevation (-90 to 90 degrees) const elevation = 90 * Math.sin(timeOfDay - Math.PI/2); // Calculate azimuth (0 to 360 degrees) // Morning: sun rises in east (90°), noon: south (180°), evening: west (270°) let azimuth = 180; // Default facing south if (timeOfDay < Math.PI) { // Morning: sun moves from east to south (90° to 180°) azimuth = 90 + (timeOfDay / Math.PI) * 90; } else { // Afternoon: sun moves from south to west (180° to 270°) azimuth = 180 + ((timeOfDay - Math.PI) / Math.PI) * 90; } // Store the current sun elevation for other systems to use this.sunElevation = elevation; // Update sun position in the sky const sunPosition = new THREE.Vector3().setFromSphericalCoords( 1, THREE.MathUtils.degToRad(90 - elevation), // Convert elevation to phi angle THREE.MathUtils.degToRad(azimuth) ); // Update sky material uniforms const uniforms = this.sky.material.uniforms; uniforms.sunPosition.value.copy(sunPosition); // Update sky colors based on time of day if (elevation > 0) { // Daytime - adjust based on time if (elevation > 45) { // Midday - vibrant blue sky uniforms.turbidity.value = 3; // Much lower turbidity for deeper blue sky uniforms.rayleigh.value = 0.8; // Lower rayleigh coefficient for more saturated blue uniforms.mieCoefficient.value = 0.0015; // Further reduced for smaller, more defined sun uniforms.mieDirectionalG.value = 0.85; // Higher value for sharper sun definition } else if (elevation > 15) { // Transition zone between midday and sunrise/sunset (15° to 45°) // Calculate smooth interpolation factor (0 at 15°, 1 at 45°) const t = (elevation - 15) / 30; // Midday values const middayTurbidity = 3; const middayRayleigh = 0.8; const middayMieCoef = 0.0015; const middayMieG = 0.85; // Sunrise/sunset values const sunsetTurbidity = 6; const sunsetRayleigh = 0.8; const sunsetMieCoef = 0.013; const sunsetMieG = 0.9; // Smoothly interpolate all values uniforms.turbidity.value = sunsetTurbidity + t * (middayTurbidity - sunsetTurbidity); uniforms.rayleigh.value = sunsetRayleigh + t * (middayRayleigh - sunsetRayleigh); uniforms.mieCoefficient.value = sunsetMieCoef + t * (middayMieCoef - sunsetMieCoef); uniforms.mieDirectionalG.value = sunsetMieG + t * (middayMieG - sunsetMieG); } else { // Sunrise/sunset - much slower and more gradual transition const t = elevation / 15; // Transition factor (updated to use 15 degrees) uniforms.turbidity.value = 3 + t * 3; // More gradual increase in turbidity uniforms.rayleigh.value = 1.8 - t * 1; // Lower rayleigh at sunrise/sunset for redder sky // Adjust sun appearance for sunrise/sunset uniforms.mieCoefficient.value = 0.005 + (1-t) * 0.008; // Significantly reduced for smaller, more defined sun uniforms.mieDirectionalG.value = 0.85 + t * 0.05; // Higher value for sharper sun disk definition } } else if (elevation > -10) { // Twilight period - much slower transition to night const t = (elevation + 30) / 30; // Transition factor (tripled from 10 to 30) uniforms.turbidity.value = 4 + t * 2; // Lower base turbidity for clearer night sky uniforms.rayleigh.value = 0.5 + t * 1.5; // Lower base rayleigh for darker night uniforms.mieCoefficient.value = 0.005 + t * 0.01; // Subtle glow transition uniforms.mieDirectionalG.value = 0.5 + t * 0.2; // Sun/moon appearance transition } else { // Deep night - much darker blue sky, less scattered light uniforms.turbidity.value = 2.5; // Lower for clearer, darker night sky uniforms.rayleigh.value = 0.25; // Much lower for deeper, darker blue uniforms.mieCoefficient.value = 0.003; // Reduced to minimize moon glow uniforms.mieDirectionalG.value = 0.4; } // Update directional light to match sun position and color if (this.directionalLight) { // Scale the position to maintain a constant distance const distance = 300; this.directionalLight.position.copy(sunPosition.clone().multiplyScalar(distance)); // Set light intensity based on sun elevation let intensity; if (elevation > 0) { // Day intensity = THREE.MathUtils.mapLinear( Math.min(elevation, 50), // Cap at 50 degrees to maintain high brightness 0, 50, 1.0, 2.5 // Range from dim morning light to full midday ); } else if (elevation > -6) { // Civil twilight (-6° to 0°) intensity = THREE.MathUtils.mapLinear(elevation, -6, 0, 0.3, 1.0); } else if (elevation > -12) { // Nautical twilight (-12° to -6°) intensity = THREE.MathUtils.mapLinear(elevation, -12, -6, 0.1, 0.3); } else { // Astronomical twilight and night (below -12°) - reduced for darker nights intensity = 0.05; } this.directionalLight.intensity = intensity; // Update light color based on elevation if (elevation > 15) { // Daylight - white this.directionalLight.color.set(0xffe0c0); // Warmer, more golden light for desert midday } else if (elevation > 0) { // Sunrise/sunset - more orange const t = elevation / 45; // Triple the transition time for sun color const color = new THREE.Color().setHSL( 0.03 + t * 0.02, // Much redder hue at lower elevations (closer to pure red) 1.0, 0.5 + t * 0.15 // Less overall brightness for more dramatic coloring ); this.directionalLight.color.copy(color); } else if (elevation > -12) { // Twilight - deep orange to purple transition - more desert-appropriate const t = (elevation + 36) / 36; // Triple the transition time const color = new THREE.Color().setHSL( t * 0.05, // Reduced hue range for more consistently warm colors 0.9, // More saturated colors 0.25 + t * 0.2 // Slightly dimmer for more dramatic effect ); this.directionalLight.color.copy(color); } else { // Night - faint blue moonlight with reduced intensity this.directionalLight.color.set(0x4466cc); } } // Update atmosphere/fog colors based on time of day if (this.scene.fog) { if (elevation > 20) { // Desert day - warmer blue with slight amber tint to match desert theme this.scene.fog.color.set(0x9ab5ff); } else if (elevation > 0) { // Sunrise/sunset with more gradual transition const t = elevation / 60; // Tripled transition time for fog color const dayColor = new THREE.Color(0x9ab5ff); // Warmer blue for desert daytime const sunsetColor = new THREE.Color(0xff9955); // More intense orange-red for desert sunset this.scene.fog.color.lerpColors(sunsetColor, dayColor, t); } else if (elevation > -10) { // Twilight - much slower transition const t = (elevation + 30) / 30; // Tripled from 10 to 30 const twilightColor = new THREE.Color(0x445577); // Deeper blue-purple for twilight const sunsetColor = new THREE.Color(0xffbb77); this.scene.fog.color.lerpColors(twilightColor, sunsetColor, t); } else if (elevation > -20) { // Deep twilight to night transition const t = (elevation + 60) / 30; // Tripled and adjusted transition period const nightColor = new THREE.Color(0x222244); const twilightColor = new THREE.Color(0x445577); this.scene.fog.color.lerpColors(nightColor, twilightColor, t); } else { // Deep night - darker color for more dramatic night atmosphere this.scene.fog.color.set(0x111133); } // Adjust fog density based on time with more gradual transitions if (elevation > 30) { // Clear midday this.scene.fog.density = 0.00015; } else if (elevation > 0) { // Transition from sunrise to midday const t = elevation / 90; // Tripled transition time for fog density this.scene.fog.density = 0.0003 - (t * 0.00015); } else if (elevation > -20) { // Twilight to night - much slower transition const t = (elevation + 60) / 60; // Tripled transition time this.scene.fog.density = 0.00025 - (t * 0.00005); } else { // Deep night - slightly increased fog density for atmospheric depth this.scene.fog.density = 0.0003; } } } // Removing the createSkyGradient method as we're now using the HDRI directly setupLights() { // Since we're using HDRI for lighting, we need less direct lighting // Ambient light with deeper blue tint to match updated sky color const ambientLight = new THREE.AmbientLight(0xc8d8ff, 1.0); // Reduced intensity for more dramatic night lighting this.scene.add(ambientLight); // Main directional light (sun) - increased intensity for brighter desert appearance this.directionalLight = new THREE.DirectionalLight(0xfffaf0, 2.5); this.directionalLight.position.set(50, 100, 50); this.directionalLight.castShadow = true; this.directionalLight.shadow.mapSize.width = 4096; // Increased resolution this.directionalLight.shadow.mapSize.height = 4096; // Increased resolution this.directionalLight.shadow.camera.near = 0.5; this.directionalLight.shadow.camera.far = 1000; // Increased far plane this.directionalLight.shadow.camera.left = -300; // Increased coverage this.directionalLight.shadow.camera.right = 300; // Increased coverage this.directionalLight.shadow.camera.top = 300; // Increased coverage this.directionalLight.shadow.camera.bottom = -300; // Increased coverage this.directionalLight.shadow.bias = -0.0005; // Reduce shadow acne // Add a target for the directional light to look at this.directionalLight.target = new THREE.Object3D(); this.scene.add(this.directionalLight.target); this.scene.add(this.directionalLight); // We don't need fill light anymore as HDRI provides that } setupTerrainSystem() { // Cache textures for reuse this.terrainTextures = this.loadTerrainTextures(); // Create initial terrain chunks this.updateTerrainChunks(); } loadTerrainTextures() { const textureLoader = new THREE.TextureLoader(); const colorTexture = textureLoader.load("https://play.rosebud.ai/assets/Ground080_1K-PNG_Color.png?Y3nt"); const normalTexture = textureLoader.load("https://play.rosebud.ai/assets/Ground080_1K-PNG_NormalGL.png?PsTg"); const roughnessTexture = textureLoader.load("https://play.rosebud.ai/assets/Ground080_1K-PNG_Roughness.png?brIg"); const aoTexture = textureLoader.load("https://play.rosebud.ai/assets/Ground080_1K-PNG_AmbientOcclusion.png?O6AJ"); const displacementTexture = textureLoader.load("https://play.rosebud.ai/assets/Ground080_1K-PNG_Displacement.png?J049"); // Set texture properties with mobile-specific optimizations [colorTexture, normalTexture, roughnessTexture, aoTexture, displacementTexture].forEach(texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // Lower anisotropy on mobile devices texture.anisotropy = this.isMobile ? 1 : 4; // Optimize mipmaps for mobile texture.generateMipmaps = !this.isMobile; if (this.isMobile) { texture.minFilter = THREE.LinearFilter; } // Larger texture repeat on mobile to hide lower resolution texture.repeat.set(this.isMobile ? 12 : 8, this.isMobile ? 12 : 8); }); return { colorTexture, normalTexture, roughnessTexture, aoTexture, displacementTexture }; } createTerrainChunk(x, z) { // Reduce geometry complexity on mobile devices const segments = this.isMobile ? 64 : 128; const geometry = new THREE.PlaneGeometry(this.chunkSize, this.chunkSize, segments, segments); geometry.rotateX(-Math.PI / 2); // Rotate to be horizontal // Apply height displacement for dune effect - with position offset for variation const vertices = geometry.attributes.position.array; const worldOffsetX = x * this.chunkSize; const worldOffsetZ = z * this.chunkSize; for (let i = 0; i < vertices.length; i += 3) { const vertexX = vertices[i] + worldOffsetX; const vertexZ = vertices[i + 2] + worldOffsetZ; // Create rolling dune pattern vertices[i + 1] = 4.5 * Math.sin(vertexX * 0.02) * Math.cos(vertexZ * 0.02) + 3.0 * Math.sin(vertexX * 0.05) * Math.sin(vertexZ * 0.05) + 1.5 * Math.cos(vertexX * 0.1) * Math.sin(vertexZ * 0.1); } geometry.computeVertexNormals(); // Create material with textures - optimized for mobile const material = new THREE.MeshStandardMaterial({ map: this.terrainTextures.colorTexture, normalMap: this.terrainTextures.normalTexture, roughnessMap: this.terrainTextures.roughnessTexture, aoMap: this.terrainTextures.aoTexture, // Only use displacement map on desktop for better performance on mobile displacementMap: this.isMobile ? null : this.terrainTextures.displacementTexture, displacementScale: this.isMobile ? 0 : 0.5, roughness: 0.9, // Increased roughness for less glossy appearance metalness: 0.05, // Reduced metalness for more natural sand look side: this.isMobile ? THREE.FrontSide : THREE.DoubleSide // Only render front side on mobile }); // Create and add the terrain mesh const chunk = new THREE.Mesh(geometry, material); chunk.position.set(x * this.chunkSize, 0, z * this.chunkSize); chunk.receiveShadow = true; chunk.castShadow = true; // Store chunk coordinates for tracking chunk.userData = { gridX: x, gridZ: z }; this.scene.add(chunk); this.terrainChunks.push(chunk); return chunk; } updateTerrainChunks() { if (!this.spaceship) return; // Update render distance based on altitude this.updateRenderDistance(); // Calculate player grid position const playerX = Math.round(this.spaceship.position.x / this.chunkSize); const playerZ = Math.round(this.spaceship.position.z / this.chunkSize); // Check which chunks we need to keep and which we need to create const keepChunks = []; const neededChunks = new Set(); // Calculate all chunks needed for (let x = playerX - this.chunksVisibleInDistance; x <= playerX + this.chunksVisibleInDistance; x++) { for (let z = playerZ - this.chunksVisibleInDistance; z <= playerZ + this.chunksVisibleInDistance; z++) { const chunkKey = `${x},${z}`; neededChunks.add(chunkKey); } } // Check existing chunks and remove those too far away for (let i = 0; i < this.terrainChunks.length; i++) { const chunk = this.terrainChunks[i]; const chunkKey = `${chunk.userData.gridX},${chunk.userData.gridZ}`; if (neededChunks.has(chunkKey)) { keepChunks.push(chunk); neededChunks.delete(chunkKey); } else { // This chunk is no longer needed, remove it this.scene.remove(chunk); chunk.geometry.dispose(); chunk.material.dispose(); } } // Update the list of chunks we're keeping this.terrainChunks = keepChunks; // Create new chunks for remaining needed positions neededChunks.forEach(chunkKey => { const [x, z] = chunkKey.split(',').map(Number); this.createTerrainChunk(x, z); }); } cleanup() { window.removeEventListener('resize', this.handleResize.bind(this)); window.removeEventListener('keydown', this.handleKeyDown.bind(this)); window.removeEventListener('keyup', this.handleKeyUp.bind(this)); // Dispose of all terrain chunks for (const chunk of this.terrainChunks) { this.scene.remove(chunk); chunk.geometry.dispose(); chunk.material.dispose(); } this.terrainChunks = []; if (this.spaceship) { this.scene.remove(this.spaceship); } while(this.scene.children.length > 0) { const object = this.scene.children[0]; if (object.geometry) object.geometry.dispose(); if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } this.scene.remove(object); } // Clean up stars system if (this.starsSystem) { this.starsSystem.dispose(); this.starsSystem = null; } // Clean up crystal system if (this.crystalSystem) { this.crystalSystem.dispose(); this.crystalSystem = null; // Clear the crystal spawn interval if (this.crystalSpawnInterval) { clearInterval(this.crystalSpawnInterval); this.crystalSpawnInterval = null; } } // Clean up post-processing if (this.postProcessing) { this.postProcessing.dispose(); this.postProcessing = null; } if (this.mountRef.current && this.renderer.domElement) { this.mountRef.current.removeChild(this.renderer.domElement); } this.renderer.dispose(); } loadSpaceship(modelUrl = 'https://play.rosebud.ai/assets/Spaceship_RaeTheRedPanda.gltf?RIxH') { const loader = new GLTFLoader(); // If we already have a spaceship, remove it if (this.spaceship) { this.scene.remove(this.spaceship); // Store current position and rotation to apply to new model const oldPosition = { x: this.spaceship.position.x, y: this.spaceship.position.y, z: this.spaceship.position.z }; const oldRotation = { x: this.spaceship.rotation.x, y: this.spaceship.rotation.y, z: this.spaceship.rotation.z }; loader.load( modelUrl, (gltf) => { this.spaceship = gltf.scene; this.spaceship.scale.set(0.5, 0.5, 0.5); // Smaller scale for better feel // Apply stored position and rotation this.spaceship.position.set(oldPosition.x, oldPosition.y, oldPosition.z); this.spaceship.rotation.set(oldRotation.x, oldRotation.y, oldRotation.z); this.spaceship.castShadow = true; this.spaceship.traverse(child => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); this.scene.add(this.spaceship); }, // Progress callback (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // Error callback (error) => { console.error('Error loading spaceship model:', error); } ); } else { // First time loading loader.load( modelUrl, (gltf) => { this.spaceship = gltf.scene; this.spaceship.scale.set(0.5, 0.5, 0.5); // Smaller scale for better feel this.spaceship.position.set(0, 5, 0); this.spaceship.rotation.y = Math.PI; // Initial direction facing forward this.spaceship.castShadow = true; this.spaceship.traverse(child => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); this.scene.add(this.spaceship); }, // Progress callback (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // Error callback (error) => { console.error('Error loading spaceship model:', error); } ); } } initCrystalSystem() { // Initialize crystal system for our scene this.crystalSystem = new CrystalSystem(this.scene); // Initial crystal spawning this.spawnCrystals(20); // Spawn initial batch of 20 crystals // Set up periodic spawning to maintain crystal population this.crystalSpawnInterval = setInterval(() => { // Only spawn new crystals if below max limit if (this.crystalSystem.crystals.length < this.crystalSystem.maxCrystals) { const toSpawn = Math.min(5, this.crystalSystem.maxCrystals - this.crystalSystem.crystals.length); this.spawnCrystals(toSpawn); } }, 10000); // Spawn new crystals every 10 seconds } } // Add new methods for keyboard controls // Add method to spawn crystals throughout the terrain ThreeScene.prototype.spawnCrystals = function(count = 5) { if (!this.crystalSystem) return; // Get player position as reference const playerPos = this.spaceship ? this.spaceship.position.clone() : new THREE.Vector3(0, 0, 0); // Spawn crystals in a radius around the player for (let i = 0; i < count; i++) { // Create random position within a radius const radius = 100 + Math.random() * 400; // Between 100-500 units from player const angle = Math.random() * Math.PI * 2; // Random angle const posX = playerPos.x + Math.cos(angle) * radius; const posZ = playerPos.z + Math.sin(angle) * radius; // Get terrain height at this position const terrainHeight = this.getTerrainHeightAtPosition(posX, posZ); // Position crystal above terrain with some random height const posY = terrainHeight + 3 + Math.random() * 8; // 3-11 units above terrain // Create crystal at position const crystal = this.crystalSystem.createCrystal(new THREE.Vector3(posX, posY, posZ)); // Store original Y position for floating animation crystal.userData.originalY = posY; } }; // Method to handle crystal collection ThreeScene.prototype.collectCrystal = function(crystal) { if (!crystal || crystal.userData.collected) return; // Mark as collected crystal.userData.collected = true; // Add points based on crystal type const pointValue = crystal.userData.value || 10; this.score += pointValue; this.crystalsCollected++; // Store the last collected crystal type for UI effects this.lastCollectedCrystalType = crystal.userData.type; // Log the collection console.log(`Crystal collected! Type: ${crystal.userData.type}, Value: ${pointValue}, Total Score: ${this.score}`); // Store original position and scale for animation crystal.userData.collectionAnimation = { startTime: this.clock.getElapsedTime(), duration: 1.0, startPosition: crystal.position.clone(), startScale: crystal.scale.clone() }; // Make material clone to avoid affecting other crystals of same type crystal.material = crystal.material.clone(); }; // Method to check if the player collides with any crystals ThreeScene.prototype.checkCrystalCollisions = function() { if (!this.crystalSystem || !this.spaceship) return; const shipPosition = this.spaceship.position.clone(); const collectionDistance = this.crystalSystem.crystalHitbox; // Process in reverse so we can safely remove while iterating for (let i = this.crystalSystem.crystals.length - 1; i >= 0; i--) { const crystal = this.crystalSystem.crystals[i]; // Skip already collected crystals if (crystal.userData.collected) continue; // Calculate distance between ship and crystal const distance = shipPosition.distanceTo(crystal.position); // If within collection range if (distance < collectionDistance) { // Call the collectCrystal method when a crystal is within range this.collectCrystal(crystal); } } }; ThreeScene.prototype.handleKeyDown = function(event) { this.keys[event.key] = true; }; ThreeScene.prototype.handleKeyUp = function(event) { this.keys[event.key] = false; }; ThreeScene.prototype.updateSpaceshipControls = function(delta) { // Update boost status based on Shift key this.isBoosting = this.keys['Shift'] && this.boostEnergy > 0; // Add gentle hovering animation when stationary or moving very slowly if (this.spaceship && this.currentSpeed < 0.05) { // Create a gentle bobbing motion based on time const hoverTime = this.clock.getElapsedTime(); const hoverHeight = Math.sin(hoverTime * 0.8) * 0.1; // Small vertical movement const hoverTilt = Math.sin(hoverTime * 1.2) * 0.01; // Subtle tilt // Apply the hover animation this.spaceship.position.y += hoverHeight * delta * 2; this.spaceship.rotation.z = THREE.MathUtils.lerp( this.spaceship.rotation.z, hoverTilt, 0.05 ); this.spaceship.rotation.x = THREE.MathUtils.lerp( this.spaceship.rotation.x, hoverTilt * 0.5, 0.05 ); } // Handle boost energy if (this.isBoosting) { // Drain boost energy when using boost this.boostEnergy = Math.max(0, this.boostEnergy - this.boostEnergyCostRate); } else { // Regenerate boost energy when not boosting this.boostEnergy = Math.min(this.boostEnergyMax, this.boostEnergy + this.boostEnergyRegenRate); } // Determine current max speed and acceleration based on boost status const currentMaxSpeed = this.isBoosting ? this.boostMaxSpeed : this.maxSpeed; const currentAcceleration = this.isBoosting ? this.boostAcceleration : this.acceleration; // Acceleration/deceleration (W/S) if (this.keys['w']) { // Accelerate up to max speed this.currentSpeed = Math.min(currentMaxSpeed, this.currentSpeed + currentAcceleration); } else if (this.keys['s']) { // Decelerate/reverse this.currentSpeed = Math.max(-this.maxSpeed / 2, this.currentSpeed - this.acceleration); } else { // Natural deceleration when no key is pressed if (this.currentSpeed > 0) { this.currentSpeed = Math.max(0, this.currentSpeed - this.deceleration); } else if (this.currentSpeed < 0) { this.currentSpeed = Math.min(0, this.currentSpeed + this.deceleration); } } // Create boost particles if moving forward (more particles when boosting) if (this.currentSpeed > 0) { // Create particles at different rates based on speed and boost status if (this.isBoosting) { // Create particles more frequently when boosting this.createBoostParticle(); } else if (this.currentSpeed > this.maxSpeed * 0.4) { // Create particles less frequently at normal speed // Increased threshold for particle creation if (Math.random() > 0.7) { this.createBoostParticle(); } } } // Determine current turn speed based on boost status const currentTurnSpeed = this.isBoosting ? this.turnSpeed * 0.9 : this.turnSpeed; // Left/right rotation (A/D) with banking effect let tiltX = 0; // Side-to-side tilting (roll) let tiltZ = 0; // Front-to-back tilting (pitch) if (this.keys['a'] || this.keys['ArrowLeft']) { this.spaceship.rotation.y += currentTurnSpeed; tiltX = this.tiltAmount * (this.isBoosting ? 1.2 : 1); // More dramatic tilt when boosting } if (this.keys['d'] || this.keys['ArrowRight']) { this.spaceship.rotation.y -= currentTurnSpeed; tiltX = -this.tiltAmount * (this.isBoosting ? 1.2 : 1); // More dramatic tilt when boosting } // Determine vertical speed multiplier based on boost const verticalSpeedMultiplier = this.isBoosting ? 0.7 : 0.5; // Pitch up/down (e key or ArrowUp for elevation) if (this.keys['e'] || this.keys['ArrowUp']) { this.spaceship.position.y += this.speed * verticalSpeedMultiplier; tiltZ = -this.tiltAmount / 2; // Pitch up } if (this.keys['q'] || this.keys['ArrowDown']) { // Get current terrain height before moving down const terrainHeight = this.getTerrainHeightAtPosition(this.spaceship.position.x, this.spaceship.position.z); const minimumHeight = terrainHeight + 3.0; // Match the safety buffer // Only allow descent if we're above the minimum hover height if (this.spaceship.position.y > minimumHeight) { this.spaceship.position.y -= this.speed * verticalSpeedMultiplier; tiltZ = this.tiltAmount / 2; // Pitch down } } // Apply smooth tilting and return to level with boost-aware response const tiltResponseRate = this.isBoosting ? 0.15 : 0.1; // Faster response during boost this.spaceship.rotation.x = THREE.MathUtils.lerp(this.spaceship.rotation.x, tiltZ, tiltResponseRate); this.spaceship.rotation.z = THREE.MathUtils.lerp(this.spaceship.rotation.z, tiltX, tiltResponseRate); // Apply momentum-based movement based on current speed this.spaceship.position.x += Math.sin(this.spaceship.rotation.y) * this.currentSpeed; this.spaceship.position.z += Math.cos(this.spaceship.rotation.y) * this.currentSpeed; // Get terrain height at current position const terrainHeight = this.getTerrainHeightAtPosition(this.spaceship.position.x, this.spaceship.position.z); // Ensure spaceship stays above terrain with a significantly increased safety buffer const safetyBuffer = 3.0; // Increased minimum hover distance above terrain this.spaceship.position.y = Math.max(terrainHeight + safetyBuffer, this.spaceship.position.y); // Update dynamic FOV based on speed and boost status const targetFOV = this.calculateTargetFOV(); // Smoothly adjust FOV with faster response while boosting const fovLerpFactor = this.isBoosting ? 0.1 : 0.05; this.camera.fov = THREE.MathUtils.lerp(this.camera.fov, targetFOV, fovLerpFactor); this.camera.updateProjectionMatrix(); // Required after changing FOV // Update camera to follow the spaceship with smoother transitions // Adjust camera distance to ensure the entire ship is in the focus area // Pulling back further to ensure the back of the ship and wings stay in focus const cameraDistance = this.isBoosting ? 13 : 11; // Increased distance to fit entire ship in focus area const cameraHeight = this.isBoosting ? 6 : 5.5; // Slightly increased height for better angle const idealCameraX = this.spaceship.position.x - Math.sin(this.spaceship.rotation.y) * cameraDistance; const idealCameraY = this.spaceship.position.y + cameraHeight; const idealCameraZ = this.spaceship.position.z - Math.cos(this.spaceship.rotation.y) * cameraDistance; // Camera follows more quickly during boost const cameraLerpFactor = this.isBoosting ? 0.07 : 0.05; this.camera.position.x = THREE.MathUtils.lerp(this.camera.position.x, idealCameraX, cameraLerpFactor); this.camera.position.y = THREE.MathUtils.lerp(this.camera.position.y, idealCameraY, cameraLerpFactor); this.camera.position.z = THREE.MathUtils.lerp(this.camera.position.z, idealCameraZ, cameraLerpFactor); this.camera.lookAt(this.spaceship.position); // Update directional light position and shadow camera to follow the player if (this.directionalLight) { // Calculate light position based on player's position and rotation // Position light at an angle that creates better shadows based on player's direction const lightDistance = 200; // Increased distance for better coverage const lightHeight = 300; // Higher position for better coverage const playerDirection = new THREE.Vector3( Math.sin(this.spaceship.rotation.y), 0, Math.cos(this.spaceship.rotation.y) ); // Position the light opposite to player's direction for more dramatic shadows this.directionalLight.position.set( this.spaceship.position.x - playerDirection.x * lightDistance, this.spaceship.position.y + lightHeight, this.spaceship.position.z - playerDirection.z * lightDistance ); // Update the shadow camera's target to the player's position this.directionalLight.target.position.copy(this.spaceship.position); this.directionalLight.target.updateMatrixWorld(); // Debug shadow camera visualization (uncomment for testing) // if (!this.shadowCameraHelper) { // this.shadowCameraHelper = new THREE.CameraHelper(this.directionalLight.shadow.camera); // this.scene.add(this.shadowCameraHelper); // } else { // this.shadowCameraHelper.update(); // } // Update the shadow camera frustum to be centered on the player this.directionalLight.shadow.camera.updateProjectionMatrix(); } }; // Add calculateCurrentSpeed method ThreeScene.prototype.calculateCurrentSpeed = function() { // If we don't have past position data yet, initialize with current position if (!this.prevPosition && this.spaceship) { this.prevPosition = { x: this.spaceship.position.x, y: this.spaceship.position.y, z: this.spaceship.position.z }; return 0; } if (!this.spaceship) return 0; // Calculate distance moved since last frame const dx = this.spaceship.position.x - this.prevPosition.x; const dy = this.spaceship.position.y - this.prevPosition.y; const dz = this.spaceship.position.z - this.prevPosition.z; // Calculate speed using Euclidean distance const distance = Math.sqrt(dx*dx + dy*dy + dz*dz); // Update previous position this.prevPosition = { x: this.spaceship.position.x, y: this.spaceship.position.y, z: this.spaceship.position.z }; return distance; }; // Calculate target FOV based on current speed and boost status ThreeScene.prototype.calculateTargetFOV = function() { // Get normalized speed factor (0-1 range) const maxSpeedValue = this.isBoosting ? this.boostMaxSpeed : this.maxSpeed; const speedFactor = this.currentSpeed / maxSpeedValue; // Calculate target FOV by adding a boost based on speed // Higher speeds = wider FOV return this.baseFOV + (speedFactor * this.maxFOVBoost); }; // Add particle effect system for boost ThreeScene.prototype.createBoostParticle = function() { // Don't create particles if we already have too many if (this.particles.length >= this.maxParticles) return; // Create multiple particles per frame for more dramatic effect const particleCount = this.isBoosting ? 3 : 1; // Reduced to single particle for normal speed for (let i = 0; i < particleCount; i++) { // Get position behind the spaceship const spaceshipPos = this.spaceship.position.clone(); const direction = new THREE.Vector3( Math.sin(this.spaceship.rotation.y), 0, Math.cos(this.spaceship.rotation.y) ); // Position the particles behind the spaceship const particlePos = spaceshipPos.clone().sub(direction.multiplyScalar(1.2)); // Add more randomization to position for better spray effect particlePos.x += (Math.random() - 0.5) * 0.6; particlePos.y += (Math.random() - 0.5) * 0.6; particlePos.z += (Math.random() - 0.5) * 0.6; // Create particle geometry - significantly larger particles for better bloom capture const geometry = new THREE.SphereGeometry(this.isBoosting ? 0.25 : 0.2, 8, 8); // Create particle material with more bloom-friendly colors // Choose different colors based on position in the flame let particleColor; const colorRand = Math.random(); if (this.isBoosting) { // More intense and brighter colors for boost to interact better with bloom if (colorRand < 0.3) { particleColor = 0xff2200; // Brighter red } else if (colorRand < 0.6) { particleColor = 0xff6600; // Brighter orange } else { particleColor = 0xffcc00; // Bright yellow } } else { // More subtle colors for normal speed with less intensity if (colorRand < 0.3) { particleColor = 0xff8800; // Softer orange } else if (colorRand < 0.7) { particleColor = 0xffaa00; // Softer gold } else { particleColor = 0xffcc44; // Softer yellow } } // Create a MeshStandardMaterial for better interaction with bloom post-processing const material = new THREE.MeshStandardMaterial({ color: particleColor, transparent: true, opacity: 0.9, emissive: particleColor, emissiveIntensity: this.isBoosting ? 5.0 : 2.5, // Reduce emission for non-boosting toneMapped: false // Disable tone mapping to preserve bright colors }); const particle = new THREE.Mesh(geometry, material); particle.position.copy(particlePos); // Add particle data for animation particle.userData = { life: this.isBoosting ? 1.0 : 0.8, // Shorter life for non-boost particles decay: this.isBoosting ? (0.01 + Math.random() * 0.02) : (0.03 + Math.random() * 0.03), // Faster decay for normal mode // Add randomized velocity - more spread when boosting velocity: new THREE.Vector3( (Math.random() - 0.5) * (this.isBoosting ? 0.12 : 0.08), // Reduced spread for non-boost 0.12 + Math.random() * (this.isBoosting ? 0.25 : 0.15), // Reduced upward movement for non-boost (Math.random() - 0.5) * (this.isBoosting ? 0.12 : 0.08) // Reduced spread for non-boost ), initialScale: this.isBoosting ? (0.4 + Math.random() * 0.5) : (0.2 + Math.random() * 0.2), // Smaller particles for non-boost color: particleColor, // Track initial color for transitions initialColor: new THREE.Color(particleColor) }; this.scene.add(particle); this.particles.push(particle); } }; ThreeScene.prototype.updateParticles = function(delta) { // Loop through particles backwards so we can safely remove items for (let i = this.particles.length - 1; i >= 0; i--) { const particle = this.particles[i]; // Update particle life particle.userData.life -= particle.userData.decay; // Remove dead particles if (particle.userData.life <= 0) { this.scene.remove(particle); particle.geometry.dispose(); particle.material.dispose(); this.particles.splice(i, 1); continue; } // Update position based on velocity with some randomization for turbulence particle.userData.velocity.x += (Math.random() - 0.5) * 0.01; particle.userData.velocity.y += (Math.random() - 0.5) * 0.01; particle.userData.velocity.z += (Math.random() - 0.5) * 0.01; particle.position.add(particle.userData.velocity); // Update size and opacity based on life with smooth curves // Use easing function for more natural fading const lifeProgress = particle.userData.life; const easeOutQuad = 1 - (1 - lifeProgress) * (1 - lifeProgress); // Make particles grow slightly before shrinking for more dynamic effect let scaleMultiplier; if (lifeProgress > 0.8) { // Initial growth phase scaleMultiplier = 0.8 + (1.0 - lifeProgress) * 1.0; } else { // Shrinking phase scaleMultiplier = lifeProgress * 1.2; } const scale = particle.userData.initialScale * scaleMultiplier; particle.scale.set(scale, scale, scale); // Color transitions during particle lifetime if (lifeProgress < 0.3 && this.isBoosting) { // Transition to red/orange at end of life for boost particles const t = 1 - (lifeProgress / 0.3); const color = new THREE.Color(particle.userData.color); color.lerp(new THREE.Color(0xff3300), t); particle.material.color = color; } else if (!this.isBoosting) { // Additional fade out for non-boost particles particle.material.emissiveIntensity = 2.5 * easeOutQuad; } particle.material.opacity = this.isBoosting ? (easeOutQuad * 0.9) : (easeOutQuad * 0.7); } }; // Add method to dynamically adjust render distance based on altitude ThreeScene.prototype.updateRenderDistance = function() { if (!this.spaceship) return; // Get current altitude const altitude = this.spaceship.position.y; // Calculate render distance factor (0 to 1) based on altitude const altitudeFactor = Math.min(1, altitude / this.minAltitudeForMaxRender); // Interpolate between base and max render distance const newRenderDistance = this.baseChunksVisibleDistance + Math.round(altitudeFactor * (this.maxChunksVisibleDistance - this.baseChunksVisibleDistance)); // Update render distance if changed if (newRenderDistance !== this.chunksVisibleInDistance) { this.chunksVisibleInDistance = newRenderDistance; // Add optional debug info to flight data if it's available if (this.updateFlightData && this.prevFlightData) { const updatedData = { ...this.prevFlightData, renderDistance: this.chunksVisibleInDistance }; this.updateFlightData(updatedData); this.prevFlightData = updatedData; } } }; // Add method to find height of terrain at a specific world position ThreeScene.prototype.getTerrainHeightAtPosition = function(x, z) { // Initialize with a very low value let maxHeight = -1000; // Check all terrain chunks to find the one at the position for (const chunk of this.terrainChunks) { // Check if position is within this chunk const chunkX = chunk.userData.gridX * this.chunkSize; const chunkZ = chunk.userData.gridZ * this.chunkSize; const halfSize = this.chunkSize / 2; // Check if the position is within this chunk bounds if (x >= chunkX - halfSize && x <= chunkX + halfSize && z >= chunkZ - halfSize && z <= chunkZ + halfSize) { // Calculate local coordinates within the chunk const localX = x - (chunkX - halfSize); const localZ = z - (chunkZ - halfSize); // Sample the height from our dune generation algorithm // We're repeating the same algorithm used in createTerrainChunk // But with specific x,z coordinates instead of iterating vertices const height = 4.5 * Math.sin(x * 0.02) * Math.cos(z * 0.02) + 3.0 * Math.sin(x * 0.05) * Math.sin(z * 0.05) + 1.5 * Math.cos(x * 0.1) * Math.sin(z * 0.1); // Update max height if this is higher maxHeight = Math.max(maxHeight, height); } } // If no terrain was found at the position, return a default minimum height return maxHeight === -1000 ? 0 : maxHeight; };