import * as THREE from 'three'; // Create stars for the night sky function createStarField() { const starCount = 1000; const stars = new THREE.BufferGeometry(); const starPositions = []; const starSizes = []; const starColors = []; // Create stars at random positions in a large sphere around the scene for (let i = 0; i < starCount; i++) { // Random position on a sphere with radius 300-500 const radius = 300 + Math.random() * 200; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); starPositions.push(x, y, z); // Random star sizes - a few larger stars const starSize = Math.random() < 0.05 ? 2 + Math.random() * 1.5 : // 5% larger stars 0.5 + Math.random() * 0.8; // 95% smaller stars starSizes.push(starSize); // Star colors - most white/blue, some yellow/red if (Math.random() < 0.8) { // White to blue stars (80%) const blueAmount = 0.8 + Math.random() * 0.2; starColors.push(0.8, 0.8, blueAmount); } else if (Math.random() < 0.7) { // Yellow stars (14%) starColors.push(1.0, 0.9, 0.6); } else { // Red stars (6%) starColors.push(1.0, 0.3 + Math.random() * 0.4, 0.3); } } stars.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3)); stars.setAttribute('color', new THREE.Float32BufferAttribute(starColors, 3)); const starMaterial = new THREE.PointsMaterial({ size: 1.5, vertexColors: true, transparent: true, opacity: 0.8, sizeAttenuation: true }); const starField = new THREE.Points(stars, starMaterial); return { starField, sizes: starSizes }; } export function createTrack(scene) { // Initialize scene fog scene.fog = new THREE.Fog(0x000000, 10, 100); // Track configuration const trackWidth = 20; const trackLength = 1000; const segmentLength = 20; // Day/night cycle system const dayNightSystem = { time: 0, // 0-1 time of day (0 = midnight, 0.25 = sunrise, 0.5 = noon, 0.75 = sunset) cycleDuration: 120, // seconds for a full day/night cycle lastUpdate: Date.now() }; // Track colors const colors = { road: 0x333333, roadEdge: 0xffff00, centerLine: 0xffffff, grid: 0x00aa00, obstacle: 0xff0000 }; // Create road surface (replace grid) const roadGeometry = new THREE.PlaneGeometry(trackWidth, trackLength, 20, 100); roadGeometry.rotateX(-Math.PI / 2); // Create road material with more realistic look const roadMaterial = new THREE.MeshBasicMaterial({ color: colors.road, wireframe: true }); const road = new THREE.Mesh(roadGeometry, roadMaterial); scene.add(road); // Add stars to the night sky const { starField, sizes } = createStarField(); scene.add(starField); // Create road markings // Center line const centerLineGeometry = new THREE.BufferGeometry(); const centerLineVertices = []; // Add dashed center line for (let z = -trackLength / 2; z < trackLength / 2; z += 5) { // Skip every other segment to create dashed line if (Math.floor(z / 5) % 2 === 0) continue; centerLineVertices.push(0, 0.05, z); centerLineVertices.push(0, 0.05, z + 2); } centerLineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(centerLineVertices, 3)); const centerLineMaterial = new THREE.LineBasicMaterial({ color: colors.centerLine, opacity: 0.9, transparent: true }); const centerLine = new THREE.LineSegments(centerLineGeometry, centerLineMaterial); scene.add(centerLine); // Road edge lines const edgeLinesGeometry = new THREE.BufferGeometry(); const edgeLineVertices = []; // Left edge for (let z = -trackLength / 2; z < trackLength / 2; z += 1) { edgeLineVertices.push(-trackWidth/2, 0.05, z); edgeLineVertices.push(-trackWidth/2, 0.05, z + 0.5); } // Right edge for (let z = -trackLength / 2; z < trackLength / 2; z += 1) { edgeLineVertices.push(trackWidth/2, 0.05, z); edgeLineVertices.push(trackWidth/2, 0.05, z + 0.5); } edgeLinesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgeLineVertices, 3)); const edgeLineMaterial = new THREE.LineBasicMaterial({ color: colors.roadEdge, opacity: 0.9, transparent: true }); const edgeLines = new THREE.LineSegments(edgeLinesGeometry, edgeLineMaterial); scene.add(edgeLines); // Add some grid under the road for depth const gridGeometry = new THREE.PlaneGeometry(trackWidth * 3, trackLength, 30, 100); gridGeometry.rotateX(-Math.PI / 2); gridGeometry.translate(0, -0.2, 0); // Convert plane to wireframe with more subtle color const gridMaterial = new THREE.LineBasicMaterial({ color: colors.grid, opacity: 0.4, transparent: true }); const grid = new THREE.LineSegments( new THREE.WireframeGeometry(gridGeometry), gridMaterial ); scene.add(grid); // Add enhanced background mountains with multiple layers const mountainRanges = []; const mountainColors = [ 0x2d3d2d, // Very dark green (furthest) 0x2d4f2d, // Dark green 0x3d5f3d, // Medium green 0x4c7346, // Forest green (closest) ]; // Create more detailed mountain ranges for (let layer = 0; layer < 4; layer++) { const mountainGeometry = new THREE.BufferGeometry(); const mountainVertices = []; // Vary peak counts by layer - more peaks in closer layers const peakCount = 30 + layer * 15; // Adjust radius and height by layer const baseRadius = 150 + layer * 40; const baseHeight = 40 - layer * 7; // Taller mountains in background // Add noise to peaks to create more realistic mountain shapes const peakNoise = []; for (let i = 0; i < peakCount + 1; i++) { peakNoise.push(Math.random() * 0.5 + 0.75); // 0.75-1.25 multiplier } // Create each mountain range as a continuous line for (let i = 0; i <= peakCount; i++) { const angle = (i / peakCount) * Math.PI * 2; const radius = baseRadius + (Math.random() * 30 - 15); const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // Create more varied heights const heightVariation = Math.sin(i * 0.4) * 10; // Add sine wave variation const height = (baseHeight + heightVariation) * peakNoise[i]; // Connect to previous point - if first point, connect to last if (i === 0) { const lastAngle = ((peakCount) / peakCount) * Math.PI * 2; const lastX = Math.cos(lastAngle) * radius; const lastZ = Math.sin(lastAngle) * radius; mountainVertices.push(lastX, 0, lastZ); } else { const prevAngle = ((i-1) / peakCount) * Math.PI * 2; const prevRadius = baseRadius + (Math.random() * 30 - 15); const prevX = Math.cos(prevAngle) * prevRadius; const prevZ = Math.sin(prevAngle) * prevRadius; mountainVertices.push(prevX, 0, prevZ); } // Add peak mountainVertices.push(x, height, z); // Add base mountainVertices.push(x, 0, z); // Create subpeaks between major peaks for more detail in closer mountains if (layer >= 2 && i < peakCount) { const nextAngle = ((i+1) / peakCount) * Math.PI * 2; const midAngle = (angle + nextAngle) / 2; const midRadius = baseRadius + (Math.random() * 30 - 15); const midX = Math.cos(midAngle) * midRadius; const midZ = Math.sin(midAngle) * midRadius; const midHeight = (baseHeight + Math.random() * 8) * 0.7; // Shorter subpeaks mountainVertices.push(x, 0, z); mountainVertices.push(midX, midHeight, midZ); mountainVertices.push(midX, 0, midZ); } } mountainGeometry.setAttribute('position', new THREE.Float32BufferAttribute(mountainVertices, 3)); // Create mountain material with depth-based opacity const mountainMaterial = new THREE.LineBasicMaterial({ color: mountainColors[layer], opacity: 0.9 - layer * 0.15, // Fade distant mountains transparent: true }); const mountains = new THREE.LineSegments(mountainGeometry, mountainMaterial); // Slight y-offset to prevent z-fighting between layers mountains.position.y = layer * 0.5; scene.add(mountains); mountainRanges.push(mountains); } // Create roadside scenery elements const createTree = () => { const tree = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2, 6); const trunkMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, wireframe: true }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 1; tree.add(trunk); // Tree top (conical for pine trees) const topGeometry = new THREE.ConeGeometry(1, 3, 6); const topMaterial = new THREE.MeshBasicMaterial({ color: 0x2D4F2D, wireframe: true }); const top = new THREE.Mesh(topGeometry, topMaterial); top.position.y = 3; tree.add(top); return tree; }; const createRock = () => { const rock = new THREE.Group(); // Create an irregular rock shape const rockGeometry = new THREE.DodecahedronGeometry(Math.random() * 0.5 + 0.5, 0); const rockMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, wireframe: true }); const rockMesh = new THREE.Mesh(rockGeometry, rockMaterial); // Random rotation to make each rock look different rockMesh.rotation.x = Math.random() * Math.PI; rockMesh.rotation.y = Math.random() * Math.PI; rockMesh.rotation.z = Math.random() * Math.PI; rock.add(rockMesh); return rock; }; const createRoadSign = () => { const sign = new THREE.Group(); // Sign post const postGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2.5, 4); const postMaterial = new THREE.MeshBasicMaterial({ color: 0x888888, wireframe: true }); const post = new THREE.Mesh(postGeometry, postMaterial); post.position.y = 1.25; sign.add(post); // Sign board const boardGeometry = new THREE.BoxGeometry(1, 0.8, 0.1); const boardMaterial = new THREE.MeshBasicMaterial({ color: 0xFFD700, // Yellow for warning signs wireframe: true }); const board = new THREE.Mesh(boardGeometry, boardMaterial); board.position.y = 2.2; sign.add(board); return sign; }; // Create basic spectator model function createSpectator() { const spectator = new THREE.Group(); // Random color for variety const bodyColor = Math.random() < 0.5 ? 0x1E90FF : 0xFF69B4; const headColor = 0xFFA07A; // Body const bodyGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.6, 8); const bodyMaterial = new THREE.MeshBasicMaterial({ color: bodyColor, wireframe: true }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = 0.3; spectator.add(body); // Head const headGeometry = new THREE.SphereGeometry(0.15, 8, 8); const headMaterial = new THREE.MeshBasicMaterial({ color: headColor, wireframe: true }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 0.75; spectator.add(head); // Arms const armGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.4, 6); const armMaterial = new THREE.MeshBasicMaterial({ color: bodyColor, wireframe: true }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-0.25, 0.5, 0); leftArm.rotation.z = Math.PI / 4; spectator.add(leftArm); const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(0.25, 0.5, 0); rightArm.rotation.z = -Math.PI / 4; spectator.add(rightArm); // Random rotation for variety spectator.rotation.y = Math.random() * Math.PI * 2; // Animation - Dancing spectators const animationSpeed = 0.015 + Math.random() * 0.025; // Even faster for dancing const armAnimationAmplitude = 0.6 + Math.random() * 0.5; // More pronounced arm movement const bodyAnimationAmplitude = 0.2 + Math.random() * 0.15; // More noticeable body movement const jumpFrequency = 0.2 + Math.random() * 0.3; // For jumping effect const spinChance = Math.random() < 0.3; // 30% chance for spinning dancers let animationTime = Math.random() * Math.PI * 2; spectator.animate = function(deltaTime) { animationTime += deltaTime * animationSpeed; // Different arm movements - some asymmetrical for dancing const leftArmWave = Math.sin(animationTime) * armAnimationAmplitude; const rightArmWave = Math.sin(animationTime + Math.PI * 0.5) * armAnimationAmplitude; // Phase shifted leftArm.rotation.z = Math.PI / 4 + leftArmWave; rightArm.rotation.z = -Math.PI / 4 - rightArmWave; // More dynamic body movement - with jumping const bodyWave = Math.cos(animationTime * 0.5) * bodyAnimationAmplitude; // Add jumping effect - some spectators jump on beat const jumpEffect = Math.pow(Math.sin(animationTime * jumpFrequency), 2) * 0.4; spectator.position.y = bodyWave + jumpEffect; // More energetic rotation - some spectators spin around if (spinChance) { spectator.rotation.y = animationTime % (Math.PI * 2); // Full spin } else { // Others just sway side to side spectator.rotation.y = Math.sin(animationTime * 0.5) * 0.5; } }; return spectator; } // Place optimized scenery elements along the track const sceneryElements = []; const sceneryCount = 30; // Reduced number of scenery elements const spectators = []; const spectatorCount = 20; // Number of spectators to add for (let i = 0; i < sceneryCount; i++) { let element; const elementType = Math.floor(Math.random() * 10); // 0-9 // Create different types of scenery with different probabilities if (elementType < 6) { // 60% trees element = createTree(); } else if (elementType < 9) { // 30% rocks element = createRock(); } else { // 10% signs element = createRoadSign(); } // Place elements on both sides of the track, but with more spacing const side = Math.random() > 0.5 ? 1 : -1; const distanceFromRoad = (trackWidth / 2) + 3 + Math.random() * 10; const z = (-trackLength / 2) + (i * (trackLength / sceneryCount)); // More evenly distributed element.position.set(side * distanceFromRoad, 0, z); // Random scale variation const scale = 0.5 + Math.random() * 1.5; element.scale.set(scale, scale, scale); // Random rotation for variety element.rotation.y = Math.random() * Math.PI * 2; scene.add(element); sceneryElements.push({ mesh: element, initialZ: z }); } // Add spectators for (let i = 0; i < spectatorCount; i++) { const spectator = createSpectator(); const side = Math.random() > 0.5 ? 1 : -1; const distanceFromRoad = (trackWidth / 2) + 2 + Math.random() * 5; const z = (-trackLength / 2) + (Math.random() * trackLength); spectator.position.set(side * distanceFromRoad, 0, z); scene.add(spectator); spectators.push({ mesh: spectator, initialZ: z }); } // Obstacles const obstacles = []; // Create realistic barrier geometry function createBarrierGeometry() { const group = new THREE.Group(); // Base - concrete block const baseGeometry = new THREE.BoxGeometry(3, 0.8, 0.5); const baseMaterial = new THREE.MeshBasicMaterial({ color: 0x888888, wireframe: true }); const base = new THREE.Mesh(baseGeometry, baseMaterial); group.add(base); // Red and white warning stripes const stripeGeometry = new THREE.BoxGeometry(3.1, 0.3, 0.6); const stripeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial); stripe.position.y = 0.5; group.add(stripe); // Add reflectors const reflectorGeometry = new THREE.BoxGeometry(0.2, 0.2, 0.1); const reflectorMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); // Left reflector const leftReflector = new THREE.Mesh(reflectorGeometry, reflectorMaterial); leftReflector.position.set(-1.2, 0.4, 0.3); group.add(leftReflector); // Right reflector const rightReflector = new THREE.Mesh(reflectorGeometry, reflectorMaterial); rightReflector.position.set(1.2, 0.4, 0.3); group.add(rightReflector); return group; } // Create alternative obstacle - traffic cone function createConeGeometry() { const group = new THREE.Group(); // Cone base const baseGeometry = new THREE.CylinderGeometry(0.5, 0.8, 0.3, 8); const baseMaterial = new THREE.MeshBasicMaterial({ color: 0x222222, wireframe: true }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 0.15; group.add(base); // Cone body const coneGeometry = new THREE.ConeGeometry(0.4, 1.2, 8); const coneMaterial = new THREE.MeshBasicMaterial({ color: 0xff5500, wireframe: true }); const cone = new THREE.Mesh(coneGeometry, coneMaterial); cone.position.y = 0.9; group.add(cone); // Reflective stripe const stripeGeometry = new THREE.CylinderGeometry(0.41, 0.41, 0.15, 8); const stripeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }); const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial); stripe.position.y = 0.7; group.add(stripe); // Scale down the cone to be appropriate size group.scale.set(0.7, 0.7, 0.7); return group; } // Create fallen debris/rock function createDebrisGeometry() { const group = new THREE.Group(); // Create irregular shape for rock/debris const rockGeometry = new THREE.DodecahedronGeometry(0.8, 0); const rockMaterial = new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true }); // Create a few rock pieces for (let i = 0; i < 3; i++) { const rock = new THREE.Mesh(rockGeometry, rockMaterial); rock.position.set( (Math.random() - 0.5) * 0.8, 0.4 + Math.random() * 0.3, (Math.random() - 0.5) * 0.8 ); rock.rotation.set( Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI ); rock.scale.set( 0.4 + Math.random() * 0.6, 0.4 + Math.random() * 0.6, 0.4 + Math.random() * 0.6 ); group.add(rock); } return group; } // Obstacles materials and types const obstacleMaterials = { barrier: new THREE.MeshBasicMaterial({ color: colors.obstacle, wireframe: true }), cone: new THREE.MeshBasicMaterial({ color: 0xff5500, wireframe: true }), debris: new THREE.MeshBasicMaterial({ color: 0x777777, wireframe: true }) }; // Track position - will move to give illusion of forward motion let trackPosition = 0; // Generate initial obstacles generateObstacles(); function generateObstacles() { // Clear old obstacles obstacles.forEach(obs => { scene.remove(obs.mesh); }); obstacles.length = 0; // Generate new ones - reduce to a more manageable number for (let i = 0; i < 8; i++) { // Choose a random obstacle type const obstacleType = Math.floor(Math.random() * 3); // 0: barrier, 1: cone, 2: debris let obstacle; switch(obstacleType) { case 0: obstacle = createBarrierGeometry(); break; case 1: obstacle = createConeGeometry(); break; case 2: obstacle = createDebrisGeometry(); break; } // Position randomly on track ahead const distance = 20 + Math.random() * 80; const posX = (Math.random() - 0.5) * trackWidth * 0.8; obstacle.position.set(posX, 0, -distance); if (obstacleType === 0) { // Only rotate barriers obstacle.rotation.y = Math.PI / 2; } else { // Random rotation for cones and debris obstacle.rotation.y = Math.random() * Math.PI * 2; } scene.add(obstacle); obstacles.push({ mesh: obstacle, originalZ: -distance, type: obstacleType }); } } // Add guardrails on both sides of the road const guardrailGeometry = new THREE.BufferGeometry(); const guardrailVertices = []; // Create guardrails on both sides const railHeight = 1.2; const postSpacing = 10; // Left guardrail for (let z = -trackLength / 2; z < trackLength / 2; z += postSpacing) { // Post guardrailVertices.push(-trackWidth/2 - 1, 0, z); guardrailVertices.push(-trackWidth/2 - 1, railHeight, z); // Rail - horizontal line connecting posts if (z < trackLength / 2 - postSpacing) { guardrailVertices.push(-trackWidth/2 - 1, railHeight, z); guardrailVertices.push(-trackWidth/2 - 1, railHeight, z + postSpacing); } } // Right guardrail for (let z = -trackLength / 2; z < trackLength / 2; z += postSpacing) { // Post guardrailVertices.push(trackWidth/2 + 1, 0, z); guardrailVertices.push(trackWidth/2 + 1, railHeight, z); // Rail - horizontal line connecting posts if (z < trackLength / 2 - postSpacing) { guardrailVertices.push(trackWidth/2 + 1, railHeight, z); guardrailVertices.push(trackWidth/2 + 1, railHeight, z + postSpacing); } } guardrailGeometry.setAttribute('position', new THREE.Float32BufferAttribute(guardrailVertices, 3)); const guardrailMaterial = new THREE.LineBasicMaterial({ color: 0xaaaaaa, opacity: 0.8, transparent: true }); const guardrails = new THREE.LineSegments(guardrailGeometry, guardrailMaterial); scene.add(guardrails); // Create fewer distance markers with larger spacing const distanceMarkers = []; const markerSpacing = 40; // Increased spacing for (let z = -trackLength / 2; z < trackLength / 2; z += markerSpacing) { // Only create markers at divisible by 100 points to reduce object count if (Math.abs(z) % 100 < 1) { const marker = new THREE.Group(); // Marker post - only create the larger ones const postGeometry = new THREE.CylinderGeometry(0.15, 0.15, 2, 4); const postMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, wireframe: true }); const post = new THREE.Mesh(postGeometry, postMaterial); post.position.y = 1; marker.add(post); // Position on right side of track marker.position.set(trackWidth / 2 + 1.5, 0, z); scene.add(marker); distanceMarkers.push({ mesh: marker, initialZ: z }); } } // Add ambient and directional lights for day/night cycle const ambientLight = new THREE.AmbientLight(0x555555, 0.2); scene.add(ambientLight); const sunLight = new THREE.DirectionalLight(0xffffaa, 1); sunLight.position.set(0, 50, -50); scene.add(sunLight); const moonLight = new THREE.DirectionalLight(0x8888ff, 0.3); moonLight.position.set(0, 50, 50); scene.add(moonLight); // Sun and moon objects const sunGeometry = new THREE.SphereGeometry(5, 8, 8); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); sun.position.set(0, 50, -150); scene.add(sun); const moonGeometry = new THREE.SphereGeometry(3, 8, 8); const moonMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaff, wireframe: true }); const moon = new THREE.Mesh(moonGeometry, moonMaterial); moon.position.set(0, 50, 150); scene.add(moon); // Create a few random constellations const constellations = []; for (let i = 0; i < 5; i++) { // Create a constellation at a random position in the sky const constellation = new THREE.Group(); const centerX = (Math.random() - 0.5) * 400; const centerY = 100 + Math.random() * 200; const centerZ = (Math.random() - 0.5) * 400; const starCount = 4 + Math.floor(Math.random() * 7); // 4-10 stars per constellation const points = []; // Create stars in the constellation for (let j = 0; j < starCount; j++) { const offsetX = (Math.random() - 0.5) * 30; const offsetY = (Math.random() - 0.5) * 30; const offsetZ = (Math.random() - 0.5) * 30; points.push(new THREE.Vector3( centerX + offsetX, centerY + offsetY, centerZ + offsetZ )); } // Create geometry for constellation lines const lineGeometry = new THREE.BufferGeometry().setFromPoints(points); const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.3 }); const lines = new THREE.Line(lineGeometry, lineMaterial); constellation.add(lines); // Create brighter stars at constellation points const starGeometry = new THREE.BufferGeometry().setFromPoints(points); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 2, transparent: true, opacity: 0.8 }); const stars = new THREE.Points(starGeometry, starMaterial); constellation.add(stars); constellations.push(constellation); scene.add(constellation); } return { dayNightSystem, update: function(state) { // Update day/night cycle const now = Date.now(); const deltaTime = (now - dayNightSystem.lastUpdate) / 1000; // Time in seconds dayNightSystem.lastUpdate = now; // Update time of day dayNightSystem.time = (dayNightSystem.time + deltaTime / dayNightSystem.cycleDuration) % 1; // Update lighting and environment based on time of day updateDayNightCycle(dayNightSystem.time); // Move track based on player speed trackPosition += state.speed * 0.016; // Create frustum for culling objects outside camera view const frustum = new THREE.Frustum(); const cameraViewProjectionMatrix = new THREE.Matrix4(); // Get the camera from the scene const camera = scene.children.find(child => child instanceof THREE.PerspectiveCamera); if (camera) { camera.updateMatrixWorld(); // Make sure the camera matrix is up to date camera.matrixWorldInverse.copy(camera.matrixWorld).invert(); cameraViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); frustum.setFromProjectionMatrix(cameraViewProjectionMatrix); } // Optimize: Apply parallax effect to mountains when speed is significant if (state.speed > 5) { // Rotate mountains slowly for parallax effect with different speeds per layer mountainRanges.forEach((range, index) => { // Closer mountains move faster than distant ones - create a parallax effect const parallaxFactor = 1 - (index / mountainRanges.length * 0.8); const rotationSpeed = 0.0001 * parallaxFactor; range.rotation.y += rotationSpeed * state.speed; // Add slight vertical motion to mountains const verticalAmount = Math.sin(now * 0.0002) * 0.5 * parallaxFactor; range.position.y = (index * 0.5) + verticalAmount; }); } // Slowly rotate starField for subtle night sky movement if (starField) { starField.rotation.y += 0.0001; // Adjust star visibility based on time of day const isNight = dayNightSystem.time > 0.75 || dayNightSystem.time < 0.25; const twilight = (dayNightSystem.time > 0.7 && dayNightSystem.time <= 0.75) || (dayNightSystem.time >= 0.25 && dayNightSystem.time < 0.3); // Stars visible at night, fading during twilight, invisible during day if (isNight) { starField.visible = true; starField.material.opacity = 0.8; constellations.forEach(c => { c.visible = true; c.children[0].material.opacity = 0.3; // lines c.children[1].material.opacity = 0.8; // stars }); } else if (twilight) { starField.visible = true; // Calculate fade factor during twilight periods let fadeFactor; if (dayNightSystem.time > 0.7) { // Evening twilight - stars becoming visible fadeFactor = (dayNightSystem.time - 0.7) * 5; // 0 to 1 over 0.2 time units } else { // Morning twilight - stars fading fadeFactor = 1 - ((dayNightSystem.time - 0.25) * 5); // 1 to 0 over 0.2 time units } starField.material.opacity = fadeFactor * 0.8; constellations.forEach(c => { c.visible = true; c.children[0].material.opacity = fadeFactor * 0.3; // lines c.children[1].material.opacity = fadeFactor * 0.8; // stars }); } else { // Day time - stars invisible starField.visible = false; constellations.forEach(c => c.visible = false); } // Make stars twinkle const positions = starField.geometry.attributes.position.array; const colors = starField.geometry.attributes.color.array; // Only update some stars each frame for performance for (let i = 0; i < 50; i++) { const starIndex = Math.floor(Math.random() * (positions.length / 3)); const colorIndex = starIndex * 3; // Small random color variation for twinkling effect const twinkle = 0.9 + Math.random() * 0.2; colors[colorIndex] *= twinkle; colors[colorIndex + 1] *= twinkle; colors[colorIndex + 2] *= twinkle; // Clamp values colors[colorIndex] = Math.min(1, colors[colorIndex]); colors[colorIndex + 1] = Math.min(1, colors[colorIndex + 1]); colors[colorIndex + 2] = Math.min(1, colors[colorIndex + 2]); } starField.geometry.attributes.color.needsUpdate = true; } // Optimize: Batch position updates for road elements const modSegmentLength = trackPosition % segmentLength; const mod10 = trackPosition % 10; const mod1 = trackPosition % 1; road.position.z = modSegmentLength; centerLine.position.z = mod10; edgeLines.position.z = mod1; guardrails.position.z = trackPosition % postSpacing; // Optimize: Use culling to only update visible scenery const playerViewDistance = 150; // Use frustum culling for scenery elements sceneryElements.forEach(element => { const relativeZ = element.initialZ + trackPosition; const modZ = relativeZ % trackLength - trackLength / 2; // First check distance (quick rejection) if (Math.abs(modZ) < playerViewDistance) { element.mesh.position.z = modZ; // Only do frustum test if we have a valid frustum and the object is nearby if (frustum) { // Create a bounding sphere for the object if (!element.boundingSphere) { // Create once and reuse element.boundingSphere = new THREE.Sphere( element.mesh.position.clone(), 3 // Approximate radius for culling ); } else { // Update position of existing sphere element.boundingSphere.center.copy(element.mesh.position); } // Check if the bounding sphere is in the frustum element.mesh.visible = frustum.intersectsSphere(element.boundingSphere); } else { element.mesh.visible = true; } } else { element.mesh.visible = false; } }); // Use frustum culling for spectators spectators.forEach(spectator => { const relativeZ = spectator.initialZ + trackPosition; const modZ = relativeZ % trackLength - trackLength / 2; // Quick distance check first if (Math.abs(modZ) < playerViewDistance) { spectator.mesh.position.z = modZ; if (frustum) { // Create or update bounding sphere if (!spectator.boundingSphere) { spectator.boundingSphere = new THREE.Sphere( spectator.mesh.position.clone(), 1 // Approximate radius for a spectator ); } else { spectator.boundingSphere.center.copy(spectator.mesh.position); } // Test against frustum spectator.mesh.visible = frustum.intersectsSphere(spectator.boundingSphere); } else { spectator.mesh.visible = true; } // Animate visible spectators if (spectator.mesh.visible) { spectator.mesh.animate(deltaTime); } } else { spectator.mesh.visible = false; } }); // Use frustum culling for distance markers distanceMarkers.forEach(marker => { const relativeZ = marker.initialZ + trackPosition; const modZ = relativeZ % trackLength - trackLength / 2; // Quick distance check first if (Math.abs(modZ) < playerViewDistance) { marker.mesh.position.z = modZ; if (frustum) { // Create or update bounding sphere if (!marker.boundingSphere) { marker.boundingSphere = new THREE.Sphere( marker.mesh.position.clone(), 2 // Approximate radius ); } else { marker.boundingSphere.center.copy(marker.mesh.position); } // Test against frustum marker.mesh.visible = frustum.intersectsSphere(marker.boundingSphere); } else { marker.mesh.visible = true; } } else { marker.mesh.visible = false; } }); // Use frustum culling for obstacles obstacles.forEach(obs => { // Move obstacle backward to create forward motion const newZ = obs.originalZ + trackPosition; // First do distance check if (Math.abs(newZ) < playerViewDistance) { obs.mesh.position.z = newZ; // Reset obstacles that are behind the player if (newZ > 10) { obs.originalZ -= 150; // Move far ahead obs.mesh.position.x = (Math.random() - 0.5) * trackWidth * 0.8; obs.mesh.position.z = obs.originalZ + trackPosition; // Rotate barricades to face the player if (obs.type === 0) { obs.mesh.rotation.y = Math.PI / 2; } } // Apply frustum culling if (frustum) { // Create or update bounding sphere if (!obs.boundingSphere) { // Different sizes based on obstacle type let radius = 2; if (obs.type === 0) radius = 3; // Barrier if (obs.type === 1) radius = 1.5; // Cone obs.boundingSphere = new THREE.Sphere( obs.mesh.position.clone(), radius ); } else { obs.boundingSphere.center.copy(obs.mesh.position); } // Test against frustum obs.mesh.visible = frustum.intersectsSphere(obs.boundingSphere); } else { obs.mesh.visible = true; } } else { obs.mesh.visible = false; } }); // Optimize: Only add new obstacles when there aren't too many already if (obstacles.length < 12 && Math.random() < 0.003) { // Choose a random obstacle type const obstacleType = Math.floor(Math.random() * 3); // 0: barrier, 1: cone, 2: debris let obstacle; switch(obstacleType) { case 0: obstacle = createBarrierGeometry(); break; case 1: obstacle = createConeGeometry(); break; case 2: obstacle = createDebrisGeometry(); break; } const distance = -120 - Math.random() * 70; const posX = (Math.random() - 0.5) * trackWidth * 0.8; obstacle.position.set(posX, 0, distance + trackPosition); if (obstacleType === 0) { // Only rotate barriers obstacle.rotation.y = Math.PI / 2; } else { // Random rotation for cones and debris obstacle.rotation.y = Math.random() * Math.PI * 2; } scene.add(obstacle); obstacles.push({ mesh: obstacle, originalZ: distance, type: obstacleType }); } }, checkCollisions: function(playerPosition) { // Check if player is out of bounds if (Math.abs(playerPosition.x) > trackWidth / 2) { return true; } // Check collision with obstacles for (const obstacle of obstacles) { const distance = playerPosition.distanceTo(obstacle.mesh.position); // Different collision distances based on obstacle type let collisionThreshold = 2; if (obstacle.type === 1) { // Cone collisionThreshold = 1.3; // Smaller collision for cones } else if (obstacle.type === 0) { // Barrier collisionThreshold = 2.2; // Larger collision for barriers } else if (obstacle.type === 2) { // Debris collisionThreshold = 1.7; // Medium collision for debris } if (distance < collisionThreshold) { return true; } } return false; } }; // Day/night cycle function function updateDayNightCycle(time) { // Calculate sun/moon positions in the sky const sunAngle = (time * Math.PI * 2) - Math.PI/2; const moonAngle = (time * Math.PI * 2) + Math.PI/2; // Update stars - make them brighter/dimmer based on moon height const radius = 200; const height = 100; // Update star field brightness based on moon position if (starField) { // Stars are brighter when the moon is lower or absent const moonVisibility = Math.max(0, Math.sin(moonAngle)); const baseBrightness = 0.8; const moonEffect = 0.2; // How much moon reduces star brightness // Stars get slightly dimmer when moon is high const starBrightness = baseBrightness - (moonVisibility * moonEffect); starField.material.opacity = starBrightness; } // Position sun and moon sun.position.x = Math.cos(sunAngle) * radius; sun.position.y = Math.sin(sunAngle) * height + height/2; sun.position.z = Math.sin(sunAngle) * radius; moon.position.x = Math.cos(moonAngle) * radius; moon.position.y = Math.sin(moonAngle) * height + height/2; moon.position.z = Math.sin(moonAngle) * radius; // Hide the celestial objects when they're below the horizon sun.visible = sun.position.y > 0; moon.visible = moon.position.y > 0; // Update directional lights to match sun/moon positions sunLight.position.copy(sun.position.clone().normalize()); moonLight.position.copy(moon.position.clone().normalize()); // Adjust light intensities based on time of day const sunHeight = Math.max(0, Math.sin(sunAngle)); const moonHeight = Math.max(0, Math.sin(moonAngle)); sunLight.intensity = sunHeight * 1.5; moonLight.intensity = moonHeight * 0.5; ambientLight.intensity = 0.1 + sunHeight * 0.3 + moonHeight * 0.1; // Change sky color based on time of day let skyColor; if (time < 0.25) { // Night to sunrise // Blend from night to sunrise const blend = time / 0.25; skyColor = new THREE.Color(0x000922).lerp(new THREE.Color(0xe57b31), blend); } else if (time < 0.5) { // Sunrise to noon const blend = (time - 0.25) / 0.25; skyColor = new THREE.Color(0xe57b31).lerp(new THREE.Color(0x87ceeb), blend); } else if (time < 0.75) { // Noon to sunset const blend = (time - 0.5) / 0.25; skyColor = new THREE.Color(0x87ceeb).lerp(new THREE.Color(0xff8c00), blend); } else { // Sunset to night const blend = (time - 0.75) / 0.25; skyColor = new THREE.Color(0xff8c00).lerp(new THREE.Color(0x000922), blend); } scene.background = skyColor; // Update mountain colors based on time of day mountainRanges.forEach((range, index) => { const material = range.material; // Base mountain color from array const baseColor = new THREE.Color(mountainColors[index]); // For sunrise/sunset, add reddish glow to mountains if ((time > 0.2 && time < 0.3) || (time > 0.7 && time < 0.8)) { // Morning or evening glow const sunsetInfluence = time < 0.3 ? (time - 0.2) * 10 : // morning ramp up (0.8 - time) * 10; // evening ramp down // Add reddish/orange tint to mountains at sunrise/sunset const sunsetColor = new THREE.Color(0xffa07a); material.color.copy(baseColor).lerp(sunsetColor, sunsetInfluence * 0.4); } else { // Regular day/night color adjustments if (time < 0.5) { // Day const dayIntensity = Math.sin((time / 0.5) * Math.PI); material.color.copy(baseColor).multiplyScalar(0.8 + dayIntensity * 0.4); } else { // Night const nightFactor = 0.5 + moonHeight * 0.3; material.color.copy(baseColor).multiplyScalar(nightFactor); } } }); // Adjust fog to match time of day const fogNear = 10 + sunHeight * 10; // 10-20 const fogFar = 70 + sunHeight * 50; // 70-120 // Adjust fog color for night sky if (time > 0.75 || time < 0.25) { // Deep night - darker blue-black with slight moon influence const deepNightColor = new THREE.Color(0x000922); const moonlitColor = new THREE.Color(0x101532); const moonInfluence = Math.max(0, Math.sin(moonAngle)); skyColor = deepNightColor.lerp(moonlitColor, moonInfluence); } // Initialize fog if not already done if (!scene.fog) { scene.fog = new THREE.Fog(skyColor, fogNear, fogFar); } else { scene.fog.near = fogNear; scene.fog.far = fogFar; scene.fog.color.copy(skyColor); } // Update grid color based on time of day gridMaterial.color.setRGB( 0.0 + dayProgress(time) * 0.2, 0.3 + dayProgress(time) * 0.7, 0.0 + dayProgress(time) * 0.0 ); // Update obstacle visibility - more visible at night const obstacleGlow = 0.4 + (1 - dayProgress(time)) * 0.6; // More glow at night obstacleMaterials.barrier.color.setRGB(obstacleGlow, 0, 0); obstacleMaterials.cone.color.setRGB(obstacleGlow, obstacleGlow * 0.3, 0); } // Helper function to calculate day progress for color transitions function dayProgress(time) { return (Math.sin(time * Math.PI * 2 - Math.PI/2) + 1) / 2; } }