// This project is a star map where we can click on systems to view the systems planets orbiting import * as THREE from 'three'; import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; const CAMERA_SETTINGS = { FOV: 75, NEAR: 0.1, FAR: 5000, MIN_DISTANCE: 3, MAX_DISTANCE: 200, MAX_POLAR_ANGLE: Math.PI / 2, }; class AxisViewer { constructor(scene, size = 5) { this.scene = scene; this.size = size; this.axisGroup = new THREE.Group(); this.createAxis(); this.scene.add(this.axisGroup); } createAxis() { // X-axis (red) const xGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(this.size, 0, 0) ]); const xMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 }); const xAxis = new THREE.Line(xGeometry, xMaterial); // Y-axis (green) const yGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, this.size, 0) ]); const yMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); const yAxis = new THREE.Line(yGeometry, yMaterial); // Z-axis (blue) const zGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, this.size) ]); const zMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff }); const zAxis = new THREE.Line(zGeometry, zMaterial); this.axisGroup.add(xAxis, yAxis, zAxis); } update() { // Add any update logic here if needed } } class CameraController { constructor(camera, domElement) { this.camera = camera; this.domElement = domElement; this.followTarget = null; this.followOffset = new THREE.Vector3(0, 5, 10); this.followDistance = 15; this.isFollowing = false; // Movement settings this.moveSpeed = 100; this.rotateSpeed = 0.002; this.zoomSpeed = 5; // Current movement state this.moveState = { forward: false, backward: false, left: false, right: false, up: false, down: false }; // Mouse state this.mouseState = { x: 0, y: 0, isDragging: false }; // Camera angles this.rotation = { phi: 0, // vertical rotation theta: 0 // horizontal rotation }; // Set up event listeners this.setupEventListeners(); // Initial position this.reset(); } setupEventListeners() { // Keyboard events document.addEventListener('keydown', (e) => this.handleKeyDown(e)); document.addEventListener('keyup', (e) => this.handleKeyUp(e)); // Mouse events this.domElement.addEventListener('mousedown', (e) => this.handleMouseDown(e)); this.domElement.addEventListener('mousemove', (e) => this.handleMouseMove(e)); this.domElement.addEventListener('mouseup', (e) => this.handleMouseUp(e)); this.domElement.addEventListener('wheel', (e) => this.handleMouseWheel(e)); } handleKeyDown(event) { switch (event.code) { case 'KeyW': this.moveState.forward = true; break; case 'KeyS': this.moveState.backward = true; break; case 'KeyA': this.moveState.left = true; break; case 'KeyD': this.moveState.right = true; break; case 'Space': this.moveState.up = true; break; case 'ShiftLeft': this.moveState.down = true; break; } } handleKeyUp(event) { switch (event.code) { case 'KeyW': this.moveState.forward = false; break; case 'KeyS': this.moveState.backward = false; break; case 'KeyA': this.moveState.left = false; break; case 'KeyD': this.moveState.right = false; break; case 'Space': this.moveState.up = false; break; case 'ShiftLeft': this.moveState.down = false; break; } } handleMouseDown(event) { this.mouseState.isDragging = true; this.mouseState.x = event.clientX; this.mouseState.y = event.clientY; } handleMouseMove(event) { if (!this.mouseState.isDragging) return; const deltaX = event.clientX - this.mouseState.x; const deltaY = event.clientY - this.mouseState.y; this.rotation.theta -= deltaX * this.rotateSpeed; this.rotation.phi -= deltaY * this.rotateSpeed; // Clamp vertical rotation this.rotation.phi = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.rotation.phi)); this.mouseState.x = event.clientX; this.mouseState.y = event.clientY; } handleMouseUp() { this.mouseState.isDragging = false; } handleMouseWheel(event) { const zoomAmount = -Math.sign(event.deltaY) * this.zoomSpeed; const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion); this.camera.position.addScaledVector(forward, zoomAmount); } update(deltaTime = 0.016) { // Update rotation matrix based on user input for both free and follow modes const rotationMatrix = new THREE.Matrix4(); rotationMatrix.makeRotationFromEuler( new THREE.Euler(this.rotation.phi, this.rotation.theta, 0, 'YXZ') ); if (this.isFollowing && this.followTarget) { const targetPos = this.followTarget.mesh.position.clone(); // Get current distance from target const currentOffset = this.camera.position.clone().sub(targetPos); let currentDistance = currentOffset.length(); // Handle zooming const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion); const proposedNewPosition = this.camera.position.clone().addScaledVector(forward, this.zoomDelta || 0); const proposedDistance = proposedNewPosition.clone().sub(targetPos).length(); // Only apply zoom if it wouldn't bring us closer than the minimum distance if (proposedDistance >= this.followDistance) { this.camera.position.copy(proposedNewPosition); currentDistance = proposedDistance; } this.zoomDelta = 0; // Update camera position while maintaining current distance // Calculate new position while maintaining minimum distance const direction = new THREE.Vector3(0, 0, 1).applyMatrix4(rotationMatrix); const newDistance = Math.max(currentDistance, this.followDistance); const newPosition = targetPos.clone().add(direction.multiplyScalar(newDistance)); // Smoothly move camera to new position this.camera.position.lerp(newPosition, 0.1); // Look at target this.camera.lookAt(targetPos); } else { // Free camera mode movement // Calculate movement direction const forward = new THREE.Vector3(0, 0, -1).applyMatrix4(rotationMatrix); const right = new THREE.Vector3(1, 0, 0).applyMatrix4(rotationMatrix); const up = new THREE.Vector3(0, 1, 0); // Apply movement const moveVector = new THREE.Vector3(0, 0, 0); if (this.moveState.forward) moveVector.add(forward); if (this.moveState.backward) moveVector.sub(forward); if (this.moveState.right) moveVector.add(right); if (this.moveState.left) moveVector.sub(right); if (this.moveState.up) moveVector.add(up); if (this.moveState.down) moveVector.sub(up); // Normalize and scale movement if (moveVector.lengthSq() > 0) { moveVector.normalize().multiplyScalar(this.moveSpeed * deltaTime); this.camera.position.add(moveVector); } // Update camera rotation this.camera.quaternion.setFromRotationMatrix(rotationMatrix); } } followObject(object) { this.followTarget = object; this.isFollowing = true; // Set initial camera position relative to target const targetPos = object.mesh.position.clone(); const distance = 15; // Initial follow distance // Update UI immediately when following starts if (window.updateFollowButton) { window.updateFollowButton(); } // Position camera at the initial distance const offset = new THREE.Vector3(0, 0, distance).applyEuler( new THREE.Euler(this.rotation.phi, this.rotation.theta, 0, 'YXZ') ); this.camera.position.copy(targetPos).add(offset); } stopFollowing() { this.followTarget = null; this.isFollowing = false; // Update UI immediately when following stops if (window.updateFollowButton) { window.updateFollowButton(); } } reset() { this.resetCamera(); } resetCamera() { // Reset camera position and orientation this.camera.position.set(0, 50, 100); // Reset rotation angles this.rotation.phi = -Math.PI / 4; // Look down at -45 degrees this.rotation.theta = 0; // Reset horizontal rotation // Create rotation matrix and apply it const rotationMatrix = new THREE.Matrix4(); rotationMatrix.makeRotationFromEuler( new THREE.Euler(this.rotation.phi, this.rotation.theta, 0, 'YXZ') ); this.camera.quaternion.setFromRotationMatrix(rotationMatrix); // Reset movement state Object.keys(this.moveState).forEach(key => { this.moveState[key] = false; }); } dispose() { // Remove event listeners document.removeEventListener('keydown', this.handleKeyDown); document.removeEventListener('keyup', this.handleKeyUp); this.domElement.removeEventListener('mousedown', this.handleMouseDown); this.domElement.removeEventListener('mousemove', this.handleMouseMove); this.domElement.removeEventListener('mouseup', this.handleMouseUp); this.domElement.removeEventListener('wheel', this.handleMouseWheel); } } class Star { constructor(params = {}) { this.radius = params.radius || 5; this.color = params.color || 0xffff00; this.intensity = params.intensity || 2; this.position = params.position || new THREE.Vector3(0, 0, 0); this.time = 0; // Define corona shader this.coronaShader = { vertexShader: ` varying vec2 vUv; varying vec3 vNormal; varying vec3 vViewPosition; void main() { vUv = uv; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewPosition = -mvPosition.xyz; vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 color; uniform float time; varying vec2 vUv; varying vec3 vNormal; varying vec3 vViewPosition; void main() { // Calculate view direction using vViewPosition vec3 viewDirection = normalize(vViewPosition); float rim = smoothstep(0.0, 1.0, 1.0 - dot(viewDirection, vNormal)); // Add some noise based on time float noise = sin(vUv.x * 10.0 + time) * cos(vUv.y * 10.0 + time) * 0.1; // Combine rim effect with base color and noise vec3 finalColor = color * (rim + 0.2) + noise; // Add pulsing alpha float alpha = 0.3 * (1.0 + 0.2 * sin(time * 2.0)); gl_FragColor = vec4(finalColor, alpha * rim); } ` }; // Create a group to hold all star meshes this.mesh = new THREE.Group(); this.mesh.position.copy(this.position); // Create the multi-layered star this.createStarLayers(); // Create the star light this.light = this.createStarLight(); } createStarLayers() { // Core layer (brightest, smallest) const coreGeometry = new THREE.SphereGeometry(this.radius * 0.85, 32, 32); const coreMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending }); const coreMesh = new THREE.Mesh(coreGeometry, coreMaterial); // Main layer (star surface) const surfaceGeometry = new THREE.SphereGeometry(this.radius, 32, 32); const surfaceMaterial = new THREE.MeshBasicMaterial({ color: this.color, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending }); const surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial); // Corona layer (outer glow) const coronaGeometry = new THREE.SphereGeometry(this.radius * 1.2, 32, 32); const coronaUniforms = { color: { value: new THREE.Color(this.color) }, time: { value: 0.0 } }; const coronaMaterial = new THREE.ShaderMaterial({ uniforms: coronaUniforms, vertexShader: this.coronaShader.vertexShader, fragmentShader: this.coronaShader.fragmentShader, transparent: true, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); const coronaMesh = new THREE.Mesh(coronaGeometry, coronaMaterial); // Add all layers to the group this.mesh.add(coreMesh); this.mesh.add(surfaceMesh); this.mesh.add(coronaMesh); } createStarLight() { const light = new THREE.PointLight(this.color, this.intensity, 1000); light.position.copy(this.position); light.castShadow = true; // Adjust light parameters for more realistic space lighting light.intensity = 10; // Increased intensity to compensate for removed ambient light light.decay = 2; // Physical light decay // Configure shadow properties light.shadow.mapSize.width = 2048; light.shadow.mapSize.height = 2048; light.shadow.camera.near = 0.1; light.shadow.camera.far = 1000; light.shadow.bias = -0.001; return light; } update(deltaTime) { // Update time uniform for corona shader this.time += deltaTime; if (this.mesh && this.mesh.children) { this.mesh.children.forEach((layer, index) => { // Update corona shader uniforms if (index === 2 && layer.material.uniforms) { // Corona is the third layer layer.material.uniforms.time.value = this.time; } // Different rotation speeds for each layer const rotationSpeed = 0.1 - (index * 0.02); layer.rotation.y += rotationSpeed * (deltaTime || 0.016); }); } } } class AsteroidBelt { constructor(params = {}) { this.minRadius = params.minRadius || 15; this.maxRadius = params.maxRadius || 25; this.minHeight = params.minHeight || -2; this.maxHeight = params.maxHeight || 2; this.numAsteroids = params.numAsteroids || 100; this.asteroidSize = params.asteroidSize || { min: 0.1, max: 0.3 }; this.orbitSpeed = params.orbitSpeed || { min: 0.1, max: 0.3 }; this.asteroids = []; this.beltGroup = new THREE.Group(); this.beltGroup.visible = true; // Initialize starting angles for all potential asteroids this.initialAngles = Array(this.numAsteroids).fill(0).map(() => Math.random() * Math.PI * 2); this.createAsteroids(); } createAsteroids() { this.beltGroup.visible = true; for (let i = 0; i < this.numAsteroids; i++) { const radius = Math.random() * (this.maxRadius - this.minRadius) + this.minRadius; const height = Math.random() * (this.maxHeight - this.minHeight) + this.minHeight; // Random position on the orbit const angle = Math.random() * Math.PI * 2; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // Create asteroid const size = Math.random() * (this.asteroidSize.max - this.asteroidSize.min) + this.asteroidSize.min; const geometry = new THREE.IcosahedronGeometry(size, 0); const material = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.9, metalness: 0.1, emissive: new THREE.Color(0x888888).multiplyScalar(0.05), emissiveIntensity: 0.1 }); // Make the asteroids more visible material.opacity = 1; material.transparent = false; material.side = THREE.DoubleSide; const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, height, z); mesh.visible = true; mesh.castShadow = true; mesh.receiveShadow = true; // Randomly rotate the asteroid for more variety mesh.rotation.set( Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI ); // Log creation of every 50th asteroid if (i % 50 === 0) { console.log(`Created asteroid ${i}:`, { position: mesh.position.toArray(), radius: radius, size: size, visible: mesh.visible }); } // Store asteroid data // Ensure angle is properly initialized const initialAngle = this.initialAngles[i]; this.asteroids.push({ mesh, radius, height, angle: initialAngle, orbitSpeed: Math.random() * (this.orbitSpeed.max - this.orbitSpeed.min) + this.orbitSpeed.min }); this.beltGroup.add(mesh); } } update(deltaTime) { if (!this.beltGroup.visible) { this.beltGroup.visible = true; } this.asteroids.forEach((asteroid, index) => { if (!asteroid.mesh.visible) { asteroid.mesh.visible = true; } // Ensure we have valid values before calculation if (typeof asteroid.angle !== 'number' || isNaN(asteroid.angle)) { asteroid.angle = this.initialAngles[index]; } if (typeof asteroid.radius !== 'number' || isNaN(asteroid.radius)) { asteroid.radius = this.minRadius + (Math.random() * (this.maxRadius - this.minRadius)); } // Update angle with proper error checking const angleIncrement = (asteroid.orbitSpeed || 0.1) * (deltaTime || 0.016); asteroid.angle = (asteroid.angle + angleIncrement) % (Math.PI * 2); // Calculate new position const x = Math.cos(asteroid.angle) * asteroid.radius; const z = Math.sin(asteroid.angle) * asteroid.radius; // Update position with error checking if (!isNaN(x) && !isNaN(z)) { asteroid.mesh.position.set(x, asteroid.height, z); asteroid.mesh.rotation.y += (deltaTime || 0.016) * 0.5; } }); } } class Moon { constructor(params = {}) { this.radius = params.radius || 0.2; this.orbitRadius = params.orbitRadius || 2; this.orbitSpeed = params.orbitSpeed || 2; this.rotationSpeed = params.rotationSpeed || 0.02; this.color = params.color || 0x888888; this.position = new THREE.Vector3(this.orbitRadius, 0, 0); this.angle = 0; this.mesh = this.createMoonMesh(); this.orbitLine = this.createOrbitLine(); } createMoonMesh() { const geometry = new THREE.SphereGeometry(this.radius, 16, 16); const material = new THREE.MeshStandardMaterial({ color: this.color, metalness: 0.4, roughness: 0.7, emissive: new THREE.Color(this.color).multiplyScalar(0.1), emissiveIntensity: 0.2 }); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true; mesh.position.copy(this.position); return mesh; } createOrbitLine() { const segments = 64; // Increased segments for smoother dashes const points = []; for (let i = 0; i <= segments; i++) { const theta = (i / segments) * Math.PI * 2; const x = Math.cos(theta) * this.orbitRadius; const z = Math.sin(theta) * this.orbitRadius; points.push(new THREE.Vector3(x, 0, z)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineDashedMaterial({ color: 0x444444, dashSize: 1, gapSize: 0.5, scale: 1, opacity: 0.15, transparent: true, depthWrite: false, depthTest: true }); const line = new THREE.Line(geometry, material); line.computeLineDistances(); // Required for dashed lines return line; } update(deltaTime, parentPosition) { this.angle += this.orbitSpeed * deltaTime; const x = Math.cos(this.angle) * this.orbitRadius; const z = Math.sin(this.angle) * this.orbitRadius; const y = 0; this.position.set( x + parentPosition.x, y + parentPosition.y, z + parentPosition.z ); if (this.mesh) { this.mesh.position.copy(this.position); this.mesh.rotation.y += this.rotationSpeed * deltaTime; } if (this.orbitLine) { this.orbitLine.position.copy(parentPosition); } } } class Planet { constructor(params = {}) { this.radius = params.radius || 1; this.orbitRadius = params.orbitRadius || 10; this.orbitSpeed = params.orbitSpeed || 1; this.rotationSpeed = params.rotationSpeed || 0.01; this.isSelected = false; this.color = params.color || 0x3498db; this.angle = params.startAngle || Math.random() * Math.PI * 2; // Use provided angle or random this.debug = params.debug || false; // Debug flag for showing click target // Calculate initial position based on the starting angle const x = Math.cos(this.angle) * this.orbitRadius; const z = Math.sin(this.angle) * this.orbitRadius; this.position = new THREE.Vector3(x, 0, z); this.moons = []; // Create the planet mesh this.mesh = this.createPlanetMesh(); // Create orbit line this.orbitLine = this.createOrbitLine(); // Create a group to hold the planet and its moons this.planetGroup = new THREE.Group(); this.planetGroup.add(this.mesh); this.planetGroup.add(this.orbitLine); } addMoon(moonParams) { const moon = new Moon(moonParams); this.moons.push(moon); this.planetGroup.add(moon.mesh); this.planetGroup.add(moon.orbitLine); return moon; } createPlanetMesh() { // Create the main group to hold both planet and click target const planetGroup = new THREE.Group(); // Create planet core const geometry = new THREE.SphereGeometry(this.radius, 32, 32); const material = new THREE.MeshStandardMaterial({ color: this.color, metalness: 0.4, roughness: 0.7, emissive: new THREE.Color(this.color).multiplyScalar(0.1), emissiveIntensity: 0.2 }); const planetMesh = new THREE.Mesh(geometry, material); planetMesh.castShadow = true; planetMesh.receiveShadow = true; // Create click target (3x larger than planet) const clickGeometry = new THREE.SphereGeometry(this.radius * 3, 32, 32); const clickMaterial = new THREE.MeshBasicMaterial({ wireframe: this.debug, visible: this.debug, transparent: true, opacity: 0.1, depthWrite: false }); const clickMesh = new THREE.Mesh(clickGeometry, clickMaterial); // Add click handler to the click target instead of the planet clickMesh.callback = () => this.onPlanetClick(); // Randomly decide if this planet has an atmosphere if (Math.random() < 0.4) { // 40% chance of having an atmosphere // Determine atmosphere type based on planet properties const atmosphereTypes = ['Thin Atmospheric Layer', 'Dense Gaseous Envelope', 'Thick Cloudy Atmosphere', 'Toxic Gas Layer', 'Hydrogen-Rich Envelope', 'Methane Atmosphere', 'Carbon Dioxide Rich', 'Nitrogen-Oxygen Mix', 'Helium-Rich Layer' ]; this.atmosphereType = atmosphereTypes[Math.floor(Math.random() * atmosphereTypes.length)]; const atmosphereGeometry = new THREE.SphereGeometry(this.radius * 1.2, 32, 32); const atmosphereColor = new THREE.Color(this.color); const atmosphereMaterial = new THREE.MeshStandardMaterial({ color: atmosphereColor, transparent: true, opacity: 0.15, side: THREE.DoubleSide, metalness: 0.0, roughness: 1.0, depthWrite: false, blending: THREE.AdditiveBlending }); const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial); planetMesh.add(atmosphereMesh); this.hasAtmosphere = true; } else { this.hasAtmosphere = false; this.atmosphereType = null; } // Add both meshes to the group planetGroup.add(planetMesh); planetGroup.add(clickMesh); planetGroup.position.copy(this.position); // Store references this.planetMesh = planetMesh; this.clickMesh = clickMesh; return planetGroup; // Randomly decide if this planet has an atmosphere if (Math.random() < 0.4) { // 40% chance of having an atmosphere const atmosphereGeometry = new THREE.SphereGeometry(this.radius * 1.2, 32, 32); const atmosphereColor = new THREE.Color(this.color); const atmosphereMaterial = new THREE.MeshStandardMaterial({ color: atmosphereColor, transparent: true, opacity: 0.15, side: THREE.DoubleSide, metalness: 0.0, roughness: 1.0, depthWrite: false, blending: THREE.AdditiveBlending }); const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial); mesh.add(atmosphereMesh); this.hasAtmosphere = true; } else { this.hasAtmosphere = false; } // Add click event listener to the planet mesh.callback = () => this.onPlanetClick(); console.log(`Created planet at position:`, this.position); return mesh; } onPlanetClick() { // Deselect all other planets in the system if (window.Sim.planetarySystem) { window.Sim.planetarySystem.planets.forEach(planet => { if (planet !== this) { planet.isSelected = false; planet.planetMesh.material.emissiveIntensity = 0.2; } }); } // Toggle selection state this.isSelected = !this.isSelected; // Update visual feedback this.planetMesh.material.emissiveIntensity = this.isSelected ? 0.5 : 0.2; // Update camera following if (this.isSelected) { window.Sim.cameraController.followObject(this); // Update follow button after starting to follow const updateFollowButton = document.querySelector('#updateFollowButton'); if (updateFollowButton) { updateFollowButton(); } } else { window.Sim.cameraController.stopFollowing(); } } createOrbitLine() { // Create a circle in the x-z plane const segments = 128; // Increased segments for smoother dashes const points = []; for (let i = 0; i <= segments; i++) { const theta = (i / segments) * Math.PI * 2; const x = Math.cos(theta) * this.orbitRadius; const z = Math.sin(theta) * this.orbitRadius; points.push(new THREE.Vector3(x, 0, z)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineDashedMaterial({ color: 0x666666, dashSize: 2, gapSize: 1, scale: 1, // Scale of the dashes opacity: 0.2, transparent: true, depthWrite: false, depthTest: true }); const line = new THREE.Line(geometry, material); line.computeLineDistances(); // Required for dashed lines return line; } update(deltaTime) { // Ensure deltaTime is a valid number if (typeof deltaTime !== 'number' || isNaN(deltaTime)) { deltaTime = 0.016; // Default to 60fps if deltaTime is invalid } // Ensure angle is initialized if (typeof this.angle !== 'number') { this.angle = 0; } // Update atmosphere if present if (this.hasAtmosphere && this.mesh.children[0]) { const atmosphere = this.mesh.children[0]; atmosphere.rotation.y += deltaTime * 0.1; // Slow rotation for atmosphere effect atmosphere.rotation.x += deltaTime * 0.05; } // Update orbital position with validated values this.angle += (this.orbitSpeed || 1) * deltaTime; // Calculate new position in the x-z plane since systemGroup is rotated around X const radius = this.orbitRadius || 10; const x = Math.cos(this.angle) * radius; const z = Math.sin(this.angle) * radius; const y = 0; // Update position vector this.position.set(x, y, z); // Update mesh position if (this.mesh) { this.mesh.position.copy(this.position); this.mesh.visible = true; } // Update rotation around Y axis, considering system rotation this.mesh.rotation.y += this.rotationSpeed * deltaTime; // Update all moons this.moons.forEach(moon => { moon.update(deltaTime, this.position); }); } } class PlanetarySystem { constructor(params = {}) { this.star = null; this.planets = []; this.asteroidBelts = []; this.systemGroup = new THREE.Group(); this.orbitLinesVisible = true; // Track orbit lines visibility // Random generation parameters this.minPlanets = 2; this.maxPlanets = 9; this.minMoons = 0; this.maxMoons = 3; // Generate random system if specified if (params.generateRandom) { this.generateRandomSystem(); } else { // Create the star first this.createStar(params.star || {}); // Create planets if provided if (params.planets) { params.planets.forEach(planetParams => { this.addPlanet(planetParams); }); } } // No additional lighting setup - using only star light // Create planets if provided (only once) if (params.planets) { params.planets.forEach(planetParams => { this.addPlanet(planetParams); }); } } generateRandomSystem() { console.log('=== Generating New Planetary System ==='); // Keep track of planet orbits and belt placement this.planetOrbits = []; let lastBeltRadius = 0; // Initialize lastBeltRadius // Generate random star const starParams = { radius: this.randomRange(3, 7), color: this.randomStarColor(), intensity: this.randomRange(1.5, 2.5) }; this.createStar(starParams); console.log('Star:', { radius: this.star.radius, color: '#' + this.star.color.toString(16).padStart(6, '0'), intensity: this.star.intensity }); // Generate random number of planets const numPlanets = Math.floor(this.randomRange(this.minPlanets, this.maxPlanets + 1)); let lastOrbitRadius = 12; // Starting orbit radius for planets for (let i = 0; i < numPlanets; i++) { // Increase orbit radius for each planet lastOrbitRadius += this.randomRange(10, 20); const planetParams = { radius: this.randomRange(0.5, 2), orbitRadius: lastOrbitRadius, orbitSpeed: this.randomRange(0.3, 1.2), color: this.randomPlanetColor(), moons: this.generateRandomMoons(), startAngle: Math.random() * Math.PI * 2 // Random starting angle }; this.addPlanet(planetParams); // Store the orbit radius and a safety margin this.planetOrbits.push({ min: planetParams.orbitRadius - 2, // Safety margin max: planetParams.orbitRadius + 2 // Safety margin }); } // Find valid spaces for asteroid belts const validSpaces = this.findValidSpacesForBelts(); const numBelts = Math.min(Math.floor(this.randomRange(1, 3)), validSpaces.length); // Add asteroid belts in valid spaces for (let i = 0; i < numBelts; i++) { const space = validSpaces[i]; const beltWidth = Math.min(this.randomRange(5, 10), space.max - space.min); const asteroidBelt = new AsteroidBelt({ minRadius: space.min, maxRadius: space.min + beltWidth, numAsteroids: Math.floor(this.randomRange(200, 400)), // Even more asteroids asteroidSize: { min: 0.025, // Half the previous minimum size again max: 0.075 // Half the previous maximum size again }, orbitSpeed: { min: 0.1, max: 0.3 }, minHeight: -0.2, // Even tighter vertical spread maxHeight: 0.2 // Makes the belt appear more concentrated }); this.asteroidBelts.push(asteroidBelt); this.systemGroup.add(asteroidBelt.beltGroup); asteroidBelt.beltGroup.visible = true; // Update lastBeltRadius based on the current belt's max radius lastBeltRadius = space.min + beltWidth + this.randomRange(10, 20); // Space for next belt } console.log('=== System Generation Complete ==='); console.log('Total Objects:', { planets: this.planets.length, asteroidBelts: this.asteroidBelts.length, totalMoons: this.planets.reduce((sum, planet) => sum + planet.moons.length, 0) }); } findValidSpacesForBelts() { if (!this.planetOrbits.length) return []; // Sort planet orbits by minimum radius const sortedOrbits = [...this.planetOrbits].sort((a, b) => a.min - b.min); const validSpaces = []; // Check space before first planet const minBeltRadius = 40; // Minimum distance from star for any asteroid belt if (sortedOrbits[0].min > minBeltRadius + 5) { // Add some extra margin validSpaces.push({ min: Math.max(minBeltRadius, sortedOrbits[0].min - 8), max: sortedOrbits[0].min - 2 }); } // Check spaces between planets for (let i = 0; i < sortedOrbits.length - 1; i++) { const gap = sortedOrbits[i + 1].min - sortedOrbits[i].max; if (gap > 8) { // Minimum 8 units gap needed for a belt validSpaces.push({ min: sortedOrbits[i].max + 2, max: sortedOrbits[i + 1].min - 2 }); } } // Check space after last planet const lastPlanet = sortedOrbits[sortedOrbits.length - 1]; validSpaces.push({ min: lastPlanet.max + 2, max: lastPlanet.max + 20 // Allow belt up to 20 units after last planet }); return validSpaces; } randomRange(min, max) { return Math.random() * (max - min) + min; } randomStarColor() { // Stars are usually yellow, white, or slightly blue const colors = [0xffff00, 0xffffff, 0xaaaaff]; return colors[Math.floor(Math.random() * colors.length)]; } randomPlanetColor() { // Various planet colors const colors = [ 0x2A6DB0, // Deep Blue 0x1D4F1A, // Dark Green 0xA67C52, // Earth Brown 0xFFFFFF, // White 0x003366, // Deep Ocean Blue 0x006699, // Medium Blue 0x00CCCC, // Cyan Blue 0xE0FFFF, // Ice Blue 0xD2B48C, // Tan (Desert) 0xC2A679, // Sandy Brown 0x4D1A00, // Dark Volcanic Red 0x8B0000, // Deep Red 0xFFA500, // Orange 0x606060, // Gray 0x8B8B8B, // Light Gray 0x6D6D6D, // Medium Gray 0x4A4A4A, // Dark Gray 0x2E2E2E, // Near Black 0xD4AF37, // Gold (Jupiter-like) 0x8B4513, // Saddle Brown 0xF4A460, // Sandy Tan 0xE6C27A, // Pale Yellow 0xD4A76A, // Soft Brown 0xC9A16B, // Warm Beige 0x8B6F47, // Dark Sand 0x0099CC, // Ice Giant Blue 0x66CCCC, // Teal 0xB0E0E6, // Powder Blue 0x3E2723, // Brown Dwarf Dark 0x5D4037, // Dark Mocha 0x795548, // Warm Brown 0x8D6E63, // Soft Brown 0x1B1B1B, // Carbon Black 0x3E3E3E, // Charcoal 0x606060, // Medium Gray 0xA0A0A0, // Light Gray 0xB0C4DE, // Steel Blue 0xA9A9A9, // Dark Gray 0xD3D3D3, // Light Silver 0x001F3F, // Deep Navy 0x004080, // Dark Ocean Blue 0x00509E, // Blue Giant 0xFF4500, // Bright Orange-Red 0xFF8C00, // Deep Orange 0xFFFF00, // Bright Yellow 0x00FF00, // Neon Green 0x228B22, // Forest Green 0x6B8E23, // Olive Drab 0x2E8B57, // Sea Green 0x8FBC8F // Soft Green ]; return colors[Math.floor(Math.random() * colors.length)]; } generateRandomMoons() { const moons = []; const numMoons = Math.floor(this.randomRange(this.minMoons, this.maxMoons + 1)); for (let i = 0; i < numMoons; i++) { moons.push({ radius: this.randomRange(0.1, 0.3), orbitRadius: this.randomRange(2, 4), orbitSpeed: this.randomRange(1.5, 3), color: this.randomPlanetColor(), // Use the same color palette as planets startAngle: Math.random() * Math.PI * 2 // Random starting angle for moons }); } return moons; } createStar(starParams) { this.star = new Star(starParams); this.systemGroup.add(this.star.mesh); this.systemGroup.add(this.star.light); } addPlanet(planetParams) { const planet = new Planet(planetParams); this.planets.push(planet); this.systemGroup.add(planet.planetGroup); // Add moons if specified if (planetParams.moons) { planetParams.moons.forEach(moonParams => { planet.addMoon(moonParams); }); } console.log(`Added planet to system:`, planet); } update(deltaTime) { // Update star if (this.star) { this.star.update(deltaTime); } // Update all planets this.planets.forEach(planet => { planet.update(deltaTime); }); // Update asteroid belts this.asteroidBelts.forEach(belt => { belt.update(deltaTime); }); } addToScene(scene) { if (!scene) { console.error('Scene is null in addToScene!'); return; } scene.add(this.systemGroup); console.log('Added planetary system to scene. Current objects in systemGroup:', this.systemGroup.children.length); this.systemGroup.children.forEach((child, index) => { console.log(`Child ${index}:`, child.type, child.visible); }); } removeFromScene(scene) { scene.remove(this.systemGroup); } toggleOrbitLines() { this.orbitLinesVisible = !this.orbitLinesVisible; // Toggle planet orbit lines this.planets.forEach(planet => { if (planet.orbitLine) { planet.orbitLine.visible = this.orbitLinesVisible; } // Toggle moon orbit lines planet.moons.forEach(moon => { if (moon.orbitLine) { moon.orbitLine.visible = this.orbitLinesVisible; } }); }); return this.orbitLinesVisible; } } class StarMap { constructor(scene, camera) { this.scene = scene; this.camera = camera; this.stars = []; this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.starGroup = new THREE.Group(); this.scene.add(this.starGroup); // Galaxy formation properties with optimized defaults this.arms = 6; // Number of spiral arms this.spiralTightness = 0.9; // How tightly wound the spiral is this.verticalSpread = 10; // Thickness of galactic disk this.galaxyRadius = 230; // Maximum radius of the galaxy this.starCount = 3000; // Number of stars in spiral arms this.randomSpreadFactor = 15; // Random spread factor this.angleSpreadFactor = 0.3; // Angle spread factor // Central disk properties this.centralDiskRadius = 140; // Radius of the central disk this.centralStarCount = 4000; // Number of stars in central disk this.densityFalloff = 1; // Higher values create steeper density gradient this.centralDiskThickness = 5; // Vertical thickness of central disk // Generate both spiral arms and central disk this.generateStars(this.starCount); this.generateCentralDisk(this.centralStarCount); // Generate and display galaxy name this.displayGalaxyName(); // Add click event listener window.canvas.addEventListener('click', this.onStarClick.bind(this)); } generateStars(count) { const armOffset = (2 * Math.PI) / this.arms; // Angular offset between arms for (let i = 0; i < count; i++) { const radius = 0.5; const geometry = new THREE.SphereGeometry(radius, 16, 16); const material = new THREE.MeshBasicMaterial({ color: this.randomStarColor(), transparent: true, opacity: 0.8 }); const star = new THREE.Mesh(geometry, material); // Choose which arm this star belongs to const arm = Math.floor(Math.random() * this.arms); // Calculate distance from center (with random spread) const distanceFromCenter = Math.random() * this.galaxyRadius; // Calculate angle based on distance (spiral effect) const angleOffset = (distanceFromCenter / this.galaxyRadius) * this.spiralTightness * Math.PI * 2; const angle = (arm * armOffset) + angleOffset; // Add some random spread to make it look more natural const randomSpread = (Math.random() - 0.5) * this.randomSpreadFactor; const angleSpread = (Math.random() - 0.5) * this.angleSpreadFactor; // Calculate position star.position.x = (distanceFromCenter + randomSpread) * Math.cos(angle + angleSpread); star.position.z = (distanceFromCenter + randomSpread) * Math.sin(angle + angleSpread); star.position.y = (Math.random() - 0.5) * this.verticalSpread; // Vertical spread for thickness star.userData.starId = i; this.stars.push(star); this.starGroup.add(star); } } randomStarColor() { // Generate a random value between 0 and 1 const t = Math.random(); // Convert white (0xffffff) to RGB components const startR = 1, startG = 1, startB = 1; // Convert red (0xff0000) to RGB components const endR = 1, endG = 0, endB = 0; // Interpolate between the colors const r = Math.floor(((startR * (1 - t) + endR * t) * 255)); const g = Math.floor(((startG * (1 - t) + endG * t) * 255)); const b = Math.floor(((startB * (1 - t) + endB * t) * 255)); // Convert back to hex color return (r << 16) | (g << 8) | b; } generateCentralDisk(count) { for (let i = 0; i < count; i++) { // Generate random angle and radius with density falloff const angle = Math.random() * Math.PI * 2; // Use inverse transform sampling for density falloff // Use power function to create higher density at center const normalizedRadius = Math.pow(Math.random(), this.densityFalloff); const radius = normalizedRadius * this.centralDiskRadius; // Create star const starGeometry = new THREE.SphereGeometry(0.5, 16, 16); const starMaterial = new THREE.MeshBasicMaterial({ color: this.randomStarColor(), transparent: true, opacity: 0.8 * (1 - (radius / this.centralDiskRadius) * 0.5) // Fade out towards edges }); const star = new THREE.Mesh(starGeometry, starMaterial); // Calculate position star.position.x = radius * Math.cos(angle); star.position.z = radius * Math.sin(angle); star.position.y = (Math.random() - 0.5) * this.centralDiskThickness; star.userData.starId = this.stars.length; this.stars.push(star); this.starGroup.add(star); } } generateGalaxyName() { const prefixes = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Omega', 'Nova', 'Stella', 'Astro', 'Cosmo', 'Nebula']; const middles = ['Centauri', 'Draconis', 'Vega', 'Proxima', 'Andromeda', 'Carina', 'Orion', 'Lyra', 'Perseus']; const suffixes = ['Prime', 'Major', 'Minor', 'Superior', 'Rex', 'Core', 'Cluster', 'Nexus', 'System']; const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]; const middle = middles[Math.floor(Math.random() * middles.length)]; const suffix = suffixes[Math.floor(Math.random() * suffixes.length)]; return `${prefix} ${middle} ${suffix}`; } displayGalaxyName() { const nameContainer = document.createElement('div'); nameContainer.style.position = 'absolute'; nameContainer.style.top = '20px'; nameContainer.style.left = '50%'; nameContainer.style.transform = 'translateX(-50%)'; nameContainer.style.padding = '10px 20px'; nameContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; nameContainer.style.color = '#ffd700'; nameContainer.style.fontSize = '24px'; nameContainer.style.fontFamily = 'Arial, sans-serif'; nameContainer.style.borderRadius = '10px'; nameContainer.style.border = '1px solid rgba(255, 215, 0, 0.3)'; nameContainer.style.backdropFilter = 'blur(5px)'; nameContainer.style.zIndex = '1000'; nameContainer.style.textShadow = '0 0 10px rgba(255, 215, 0, 0.5)'; nameContainer.style.letterSpacing = '1px'; nameContainer.style.boxShadow = '0 0 20px rgba(0, 0, 0, 0.5)'; const galaxyName = this.generateGalaxyName(); nameContainer.textContent = galaxyName; window.uiDiv.appendChild(nameContainer); this.galaxyNameElement = nameContainer; } onStarClick(event) { // Get normalized mouse coordinates this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1; this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // Update the picking ray this.raycaster.setFromCamera(this.mouse, this.camera); if (!this.starGroup.visible) { // We're in planetary system view, only handle planet clicks if (window.Sim.planetarySystem) { const planetMeshes = window.Sim.planetarySystem.planets.map(planet => planet.clickMesh); const intersects = this.raycaster.intersectObjects(planetMeshes); if (intersects.length > 0) { const planetMesh = intersects[0].object; if (planetMesh.callback) { planetMesh.callback(); } } } return; // Exit early if we're in planetary system view } // Handle star selection only when in star map view const intersects = this.raycaster.intersectObjects(this.stars.filter(star => star.visible)); if (intersects.length > 0) { const selectedStar = intersects[0].object; this.selectStar(selectedStar); } } selectStar(star) { // Hide starmap and galaxy name this.starGroup.visible = false; if (this.galaxyNameElement) { this.galaxyNameElement.style.display = 'none'; } // Generate and show planetary system if (window.Sim.planetarySystem) { window.Sim.planetarySystem.removeFromScene(this.scene); } window.Sim.planetarySystem = new PlanetarySystem({ generateRandom: true }); window.Sim.planetarySystem.addToScene(this.scene); // Create and show system menu if (window.Sim.systemMenu) { window.Sim.systemMenu.hide(); } window.Sim.systemMenu = new SystemMenu(window.Sim.planetarySystem); window.Sim.systemMenu.show(); // Add return button to UI this.addReturnButton(); } addReturnButton() { // Create container for buttons const buttonContainer = document.createElement('div'); buttonContainer.style.position = 'absolute'; buttonContainer.style.top = '20px'; buttonContainer.style.left = '20px'; buttonContainer.style.zIndex = '1000'; buttonContainer.style.display = 'flex'; buttonContainer.style.flexDirection = 'column'; buttonContainer.style.gap = '10px'; // Return to Star Map button const returnButton = document.createElement('button'); returnButton.textContent = 'Return to Star Map'; returnButton.style.padding = '10px'; returnButton.onclick = () => this.returnToStarMap(); buttonContainer.appendChild(returnButton); // Create a separate function to add/remove the stop following button const updateFollowButton = function() { // Remove existing stop follow button if it exists const existingButton = buttonContainer.querySelector('#stopFollowButton'); if (existingButton) { buttonContainer.removeChild(existingButton); } // Add stop following button only if we're following a planet if (window.Sim.cameraController && window.Sim.cameraController.isFollowing) { const stopFollowButton = document.createElement('button'); stopFollowButton.id = 'stopFollowButton'; stopFollowButton.textContent = 'Stop Following Planet'; stopFollowButton.style.padding = '10px'; stopFollowButton.onclick = () => { if (window.Sim.cameraController) { window.Sim.cameraController.stopFollowing(); updateFollowButton(); // Update button visibility after stopping } }; buttonContainer.appendChild(stopFollowButton); } }; // Add the container to the UI and store the update function window.uiDiv.appendChild(buttonContainer); // Store the update function with an ID so we can access it later updateFollowButton.id = 'updateFollowButton'; window.updateFollowButton = updateFollowButton; // Add orbit lines toggle button const orbitLinesButton = document.createElement('button'); orbitLinesButton.textContent = 'Hide Orbit Lines'; orbitLinesButton.style.padding = '10px'; orbitLinesButton.onclick = () => { if (window.Sim.planetarySystem) { const isVisible = window.Sim.planetarySystem.toggleOrbitLines(); orbitLinesButton.textContent = isVisible ? 'Hide Orbit Lines' : 'Show Orbit Lines'; } }; buttonContainer.appendChild(orbitLinesButton); // Initial button state updateFollowButton(); // Update button visibility when following state changes if (window.Sim.cameraController) { const originalStopFollowing = window.Sim.cameraController.stopFollowing; window.Sim.cameraController.stopFollowing = function() { originalStopFollowing.call(window.Sim.cameraController); updateFollowButton(); }; } } returnToStarMap() { // Show galaxy name if (this.galaxyNameElement) { this.galaxyNameElement.style.display = 'block'; } // Stop any active camera following if (window.Sim.cameraController) { window.Sim.cameraController.stopFollowing(); } // Show starmap this.starGroup.visible = true; // Remove planetary system if (window.Sim.planetarySystem) { window.Sim.planetarySystem.removeFromScene(this.scene); window.Sim.planetarySystem = null; } // Hide system menu if (window.Sim.systemMenu) { window.Sim.systemMenu.hide(); window.Sim.systemMenu = null; } // Remove return button window.uiDiv.innerHTML = ''; // Reset camera position and orientation window.Sim.cameraController.resetCamera(); // Reset camera controller state if (window.Sim.cameraController) { window.Sim.cameraController.reset(); } } } class App { constructor() { this.scene = null; this.camera = null; this.renderer = null; this.composer = null; this.isRunning = false; this.cameraController = null; this.world = null; this.lastTime = null; this.bloomPass = null; // Initialize the scene this.init(); } setupRenderer() { this.renderer = new THREE.WebGLRenderer({ canvas: window.canvas, antialias: true, powerPreference: "high-performance", preserveDrawingBuffer: true }); // Enable shadow mapping right after renderer creation this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.toneMapping = THREE.ReinhardToneMapping; this.renderer.toneMappingExposure = 1; this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.setSize(window.innerWidth, window.innerHeight); // Setup post-processing this.setupPostProcessing(); // Handle window resizing window.addEventListener('resize', () => { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); this.composer.setSize(window.innerWidth, window.innerHeight); }); } registerObjects() { window.Camera = this.camera; window.World = this.world; } init() { // Create render divs if they don't exist this.createRenderDivs(); // Initialize Three.js components this.scene = new THREE.Scene(); if (!this.scene) { console.error('Scene is null during initialization!'); return; } // Initialize camera first this.camera = new THREE.PerspectiveCamera( CAMERA_SETTINGS.FOV, window.innerWidth / window.innerHeight, CAMERA_SETTINGS.NEAR, CAMERA_SETTINGS.FAR ); console.log('Camera position set to:', this.camera.position); // Setup renderer this.setupRenderer(); // Initialize camera controller this.cameraController = new CameraController(this.camera, this.renderer.domElement); this.axisViewer = new AxisViewer(this.scene); // Initialize StarMap after camera is created with custom parameters this.starMap = new StarMap(this.scene, this.camera); // We'll create planetary systems on demand when stars are clicked this.planetarySystem = null; // Initialize SimWorld this.registerObjects(); } setupPostProcessing() { // Create effect composer this.composer = new EffectComposer(this.renderer); // Add render pass const renderPass = new RenderPass(this.scene, this.camera); this.composer.addPass(renderPass); // Add bloom pass const bloomParams = { strength: 1.5, // The strength of the bloom effect radius: 0.4, // The radius of the bloom effect threshold: 0.25 // The threshold of the bloom effect }; this.bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), bloomParams.strength, bloomParams.radius, bloomParams.threshold ); this.composer.addPass(this.bloomPass); } createRenderDivs() { // Can create global variables by assigning them to window.variableName. window.parentDiv = document.getElementById('renderDiv'); if (!parentDiv) { console.error('Parent div not found!'); return; } // Create canvas if it doesn't exist window.canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { window.canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.zIndex = '1'; canvas.style.pointerEvents = 'all'; canvas.style.touchAction = 'none'; // Prevent default touch actions parentDiv.appendChild(canvas); } // Disable context menu for game elements canvas.addEventListener('contextmenu', (e) => e.preventDefault()); parentDiv.addEventListener('contextmenu', (e) => e.preventDefault()); window.uiDiv = document.createElement('div'); uiDiv.id = 'uiDiv'; uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.pointerEvents = 'auto'; // Allow UI interactions by default uiDiv.style.userSelect = 'none'; uiDiv.style.webkitUserSelect = 'none'; uiDiv.style.msUserSelect = 'none'; // Apply the same styles to parentDiv parentDiv.style.userSelect = 'none'; parentDiv.style.webkitUserSelect = 'none'; parentDiv.style.msUserSelect = 'none'; parentDiv.appendChild(uiDiv); // Create help button and panel after UI div is created this.createHelpUI(); } createHelpUI() { // Create help button const helpButton = document.createElement('button'); helpButton.innerHTML = '?'; helpButton.style.position = 'fixed'; helpButton.style.bottom = '20px'; helpButton.style.right = '20px'; helpButton.style.width = '40px'; helpButton.style.height = '40px'; helpButton.style.borderRadius = '50%'; helpButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; helpButton.style.border = '2px solid rgba(255, 255, 255, 0.4)'; helpButton.style.color = 'white'; helpButton.style.fontSize = '20px'; helpButton.style.cursor = 'pointer'; helpButton.style.zIndex = '10000'; helpButton.style.transition = 'all 0.3s ease'; // Hover effects helpButton.onmouseover = () => { helpButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; helpButton.style.transform = 'scale(1.1)'; }; helpButton.onmouseout = () => { helpButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; helpButton.style.transform = 'scale(1)'; }; // Create help panel const helpPanel = document.createElement('div'); helpPanel.style.display = 'none'; helpPanel.style.position = 'fixed'; helpPanel.style.top = '0'; helpPanel.style.left = '0'; helpPanel.style.width = '100%'; helpPanel.style.height = '100%'; helpPanel.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; helpPanel.style.zIndex = '9999'; helpPanel.style.backdropFilter = 'blur(5px)'; // Help content const content = document.createElement('div'); content.style.position = 'absolute'; content.style.top = '50%'; content.style.left = '50%'; content.style.transform = 'translate(-50%, -50%)'; content.style.backgroundColor = 'rgba(30, 30, 30, 0.95)'; content.style.padding = '30px'; content.style.borderRadius = '10px'; content.style.maxWidth = '600px'; content.style.width = '90%'; content.style.color = 'white'; content.style.boxShadow = '0 0 20px rgba(0, 0, 0, 0.5)'; content.innerHTML = `

Controls Guide

Camera Controls

• WASD - Move camera forward/left/backward/right

• Space/Shift - Move camera up/down

• Mouse Drag - Rotate camera view

• Mouse Wheel - Zoom in/out

Star Map Navigation

• Click on any star to view its planetary system

• Use the "Return to Star Map" button to go back

Planetary System View

• Click on planets to follow their orbit

• Use the system menu on the right to view details

• "Stop Following Planet" button to return to free camera

`; // Close button const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.position = 'absolute'; closeButton.style.top = '10px'; closeButton.style.right = '10px'; closeButton.style.backgroundColor = 'transparent'; closeButton.style.border = 'none'; closeButton.style.color = 'white'; closeButton.style.fontSize = '24px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '5px'; content.appendChild(closeButton); helpPanel.appendChild(content); // Event listeners helpButton.onclick = () => { helpPanel.style.display = 'block'; }; const hideHelp = () => { helpPanel.style.display = 'none'; }; closeButton.onclick = hideHelp; helpPanel.onclick = (e) => { if (e.target === helpPanel) { hideHelp(); } }; // Add elements to the UI window.uiDiv.appendChild(helpButton); window.uiDiv.appendChild(helpPanel); } animate(currentTime) { if (!this.isRunning) return; if (!this.lastTime) this.lastTime = currentTime; const deltaTime = (currentTime - this.lastTime) / 1000; // Convert to seconds this.lastTime = currentTime; // Update camera controls this.cameraController.update(); // Update the active system (StarMap or PlanetarySystem) if (this.planetarySystem && this.planetarySystem.update) { this.planetarySystem.update(deltaTime); } if (this.starMap && this.starMap.update) { this.starMap.update(deltaTime); } // Render the scene with post-processing this.composer.render(); requestAnimationFrame(this.animate.bind(this)); } start() { if (this.isRunning) return; this.isRunning = true; this.animate(); } stop() { this.isRunning = false; this.dispose(); } } class SystemMenu { constructor(planetarySystem) { this.planetarySystem = planetarySystem; this.panel = null; this.initialize(); } initialize() { // Create the panel container this.panel = document.createElement('div'); this.panel.style.position = 'absolute'; this.panel.style.right = '0'; this.panel.style.top = '0'; this.panel.style.width = '300px'; this.panel.style.height = '100%'; this.panel.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; this.panel.style.color = 'white'; this.panel.style.padding = '20px'; this.panel.style.overflowY = 'auto'; this.panel.style.fontFamily = 'Arial, sans-serif'; this.panel.style.zIndex = '1000'; this.panel.style.backdropFilter = 'blur(5px)'; this.panel.style.borderLeft = '1px solid rgba(255, 255, 255, 0.1)'; // Update content this.updateContent(); } updateContent() { const star = this.planetarySystem.star; const planets = this.planetarySystem.planets; const asteroidBelts = this.planetarySystem.asteroidBelts; let html = `

System Overview

`; this.panel.innerHTML = html; } show() { window.uiDiv.appendChild(this.panel); } hide() { if (this.panel && this.panel.parentNode) { this.panel.parentNode.removeChild(this.panel); } } } // Initialize the game window.Sim = new App(); Sim.start();

Controls Guide

Camera Controls

Star Map Navigation

Planetary System View

System Overview

Star

Planets (${planets.length})

Planet ${index + 1}

Asteroid Belts (${asteroidBelts.length})

Belt ${index + 1}