speed

assets/css/custom.css

@@ -41,3 +41,41 @@ canvas {
     background-color: #007bff;
     border-color: #007bff;
 }
+
+#controls-container {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 10;
+}
+
+#controls-container button {
+    background-color: #333;
+    color: white;
+    border: 1px solid #555;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+#controls-container button:hover {
+    background-color: #555;
+}
+
+#time-container {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-family: monospace;
+    font-size: 1.2em;
+    z-index: 10;
+}

assets/js/main.js

@@ -83,14 +83,14 @@ function createPlanet(radius, textureFile, distance, orbitSpeed) {
     return { planet, pivot, orbitSpeed, trail, trailPoints };
 }
 
-const mercuryData = createPlanet(0.4, 'mercury.jpg', 7, 0.04);
+const mercuryData = createPlanet(0.4, 'mercury.jpg', 7, 0.0297);
-const venusData = createPlanet(0.9, 'venus.jpg', 11, 0.015);
+const venusData = createPlanet(0.9, 'venus.jpg', 11, 0.0116);
-const earthData = createPlanet(1, 'earth.jpg', 15, 0.01);
+const earthData = createPlanet(1, 'earth.jpg', 15, 0.00717); // Adjusted for 365-day year
-const marsData = createPlanet(0.7, 'mars.jpg', 20, 0.008);
+const marsData = createPlanet(0.7, 'mars.jpg', 20, 0.0038);
-const jupiterData = createPlanet(3, 'jupiter.jpg', 30, 0.004);
+const jupiterData = createPlanet(3, 'jupiter.jpg', 30, 0.0006);
-const saturnData = createPlanet(2.5, 'saturn.jpg', 40, 0.002);
+const saturnData = createPlanet(2.5, 'saturn.jpg', 40, 0.00024);
-const uranusData = createPlanet(2, 'uranus.jpg', 50, 0.001);
+const uranusData = createPlanet(2, 'uranus.jpg', 50, 0.000085);
-const neptuneData = createPlanet(1.9, 'neptune.jpg', 60, 0.0005);
+const neptuneData = createPlanet(1.9, 'neptune.jpg', 60, 0.000043);
 
 // --- Saturn's Rings ---
 const ringGeometry = new THREE.RingGeometry(3.5, 5, 64);
@@ -104,6 +104,16 @@ const ring = new THREE.Mesh(ringGeometry, ringMaterial);
 ring.rotation.x = -Math.PI / 2.5; // Tilt the rings
 saturnData.planet.add(ring);
 
+// --- Moon ---
+const moonGeometry = new THREE.SphereGeometry(0.25, 32, 32);
+const moonMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
+const moon = new THREE.Mesh(moonGeometry, moonMaterial);
+
+const moonPivot = new THREE.Object3D();
+earthData.planet.add(moonPivot);
+moonPivot.add(moon);
+moon.position.x = 2;
+
 
 const planets = [mercuryData, venusData, earthData, marsData, jupiterData, saturnData, uranusData, neptuneData];
 
@@ -240,21 +250,72 @@ statsButtons.querySelector('button[data-planet="earth"]').classList.add('active'
 setOutline(earthData.planet); // Initial outline for Earth
 
 
+// --- Controls Logic ---
+let isPaused = false;
+const pauseButton = document.getElementById('pause-button');
+const speedToggleButton = document.getElementById('speed-toggle-button');
+
+pauseButton.addEventListener('click', () => {
+    isPaused = !isPaused;
+    pauseButton.textContent = isPaused ? 'Play' : 'Pause';
+});
+
+const speeds = [1, 100, 500];
+let currentSpeedIndex = 0;
+let timeScale = speeds[currentSpeedIndex]; // Start with 1x speed
+
+speedToggleButton.addEventListener('click', () => {
+    currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length;
+    timeScale = speeds[currentSpeedIndex];
+    speedToggleButton.textContent = 'Speed: ' + timeScale + 'x';
+});
+
+
+// --- Time & Simulation ---
+const clock = new THREE.Clock();
+const timeContainer = document.getElementById('time-container');
+let simulationTime = new Date();
+const ORBIT_SPEED_MULTIPLIER = 0.1;
+const TIME_SPEED_FACTOR = 3600; // 1 real second = 1 simulation hour at 1x
+
+
+function updateTimeDisplay() {
+    const hours = String(simulationTime.getHours()).padStart(2, '0');
+    const minutes = String(simulationTime.getMinutes()).padStart(2, '0');
+    const seconds = String(simulationTime.getSeconds()).padStart(2, '0');
+    const day = String(simulationTime.getDate()).padStart(2, '0');
+    const month = String(simulationTime.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
+    const year = simulationTime.getFullYear();
+    timeContainer.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
 // Animation loop
 function animate() {
     requestAnimationFrame(animate);
 
+    // Get time delta for frame-rate independent animation
+    const delta = clock.getDelta();
+
     // Update controls
     controls.update();
 
-    // Rotation
+    if (!isPaused) {
-    sun.rotation.y += 0.001;
+        // Advance simulation time using milliseconds for precision
-    const maxTrailPoints = 200; // Adjust for longer/shorter trails
+        const incrementMs = delta * 1000 * timeScale * TIME_SPEED_FACTOR;
+        simulationTime.setTime(simulationTime.getTime() + incrementMs);
+
+        // Sun's self-rotation (can be slower and independent of timeScale)
+        sun.rotation.y += 0.005 * delta;
+        
+        const maxTrailPoints = 200;
         const worldPosition = new THREE.Vector3();
 
         planets.forEach(p => {
-        p.pivot.rotation.y += p.orbitSpeed;
+            // Orbit speed is now correctly scaled by timeScale
-        p.planet.rotation.y += 0.01; // Add self-rotation
+            p.pivot.rotation.y += p.orbitSpeed * ORBIT_SPEED_MULTIPLIER * delta * timeScale;
+            
+            // Planet's self-rotation (can also be constant)
+            p.planet.rotation.y += 0.05 * delta;
 
             // Update trail
             p.planet.getWorldPosition(worldPosition);
@@ -267,6 +328,13 @@ function animate() {
             p.trail.geometry.setFromPoints(p.trailPoints);
         });
 
+        // Moon's orbit (also scaled by timeScale)
+        moonPivot.rotation.y += 0.1 * ORBIT_SPEED_MULTIPLIER * delta * timeScale;
+    }
+
+    // Update time display every frame
+    updateTimeDisplay();
+
     renderer.render(scene, camera);
 }
 
@@ -278,3 +346,6 @@ window.addEventListener('resize', () => {
     camera.updateProjectionMatrix();
     renderer.setSize(window.innerWidth, window.innerHeight);
 });
+
+// Initial call to set time
+updateTimeDisplay();

index.php

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
+    <div id="time-container"></div>
     <div id="stats-container">
         <div id="stats-buttons">
             <button data-planet="mercury">Mercury</button>
@@ -20,6 +21,10 @@
         </div>
         <div id="stats-info"></div>
     </div>
+    <div id="controls-container">
+        <button id="pause-button">Pause</button>
+        <button id="speed-toggle-button">Speed: 1x</button>
+    </div>
     <script type="importmap">
         {
             "imports": {