control

assets/js/main.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 // Scene
 const scene = new THREE.Scene();
@@ -13,6 +14,14 @@ const renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
+// Controls
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+controls.dampingFactor = 0.05;
+controls.screenSpacePanning = false;
+controls.minDistance = 10;
+controls.maxDistance = 500;
+
 // Lighting
 const pointLight = new THREE.PointLight(0xffffff, 5, 3000); // Increased intensity and distance
 scene.add(pointLight);
@@ -56,7 +65,7 @@ const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.
 function createPlanet(radius, textureFile, distance, orbitSpeed) {
     const texture = textureLoader.load(`assets/textures/${textureFile}`);
     const geometry = new THREE.SphereGeometry(radius, 32, 32);
-    const material = new THREE.MeshStandardMaterial({ map: texture });
+    const material = new THREE.MeshBasicMaterial({ map: texture });
     const planet = new THREE.Mesh(geometry, material);
     
     const pivot = new THREE.Object3D();
@@ -64,22 +73,38 @@ function createPlanet(radius, textureFile, distance, orbitSpeed) {
     pivot.add(planet);
     planet.position.x = distance;
 
-    const orbitGeometry = new THREE.BufferGeometry().setFromPoints(
+    // Trail setup
-        new THREE.Path().absarc(0, 0, distance, 0, Math.PI * 2, false).getSpacedPoints(segments)
+    const trailPoints = [];
-    );
+    const trailGeometry = new THREE.BufferGeometry();
-    const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
+    const trailMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5, transparent: true });
-    orbit.rotation.x = Math.PI / 2;
+    const trail = new THREE.Line(trailGeometry, trailMaterial);
-    scene.add(orbit);
+    scene.add(trail);
 
-    return { planet, pivot, orbitSpeed };
+    return { planet, pivot, orbitSpeed, trail, trailPoints };
 }
 
 const mercuryData = createPlanet(0.4, 'mercury.jpg', 7, 0.04);
 const venusData = createPlanet(0.9, 'venus.jpg', 11, 0.015);
 const earthData = createPlanet(1, 'earth.jpg', 15, 0.01);
 const marsData = createPlanet(0.7, 'mars.jpg', 20, 0.008);
+const jupiterData = createPlanet(3, 'jupiter.jpg', 30, 0.004);
+const saturnData = createPlanet(2.5, 'saturn.jpg', 40, 0.002);
+const uranusData = createPlanet(2, 'uranus.jpg', 50, 0.001);
 
-const planets = [mercuryData, venusData, earthData, marsData];
+// --- Saturn's Rings ---
+const ringGeometry = new THREE.RingGeometry(3.5, 5, 64);
+const ringMaterial = new THREE.MeshBasicMaterial({
+    color: 0xffffff,
+    side: THREE.DoubleSide,
+    transparent: true,
+    opacity: 0.6
+});
+const ring = new THREE.Mesh(ringGeometry, ringMaterial);
+ring.rotation.x = -Math.PI / 2.5; // Tilt the rings
+saturnData.planet.add(ring);
+
+
+const planets = [mercuryData, venusData, earthData, marsData, jupiterData, saturnData, uranusData];
 
 // Planet Data
 const planetData = {
@@ -106,6 +131,24 @@ const planetData = {
         mass: '6.39 × 10^23 kg',
         radius: '3,389.5 km',
         orbital_speed: '24.07 km/s',
+    },
+    [jupiterData.planet.uuid]: {
+        name: 'Jupiter',
+        mass: '1.898 × 10^27 kg',
+        radius: '69,911 km',
+        orbital_speed: '13.07 km/s',
+    },
+    [saturnData.planet.uuid]: {
+        name: 'Saturn',
+        mass: '5.683 × 10^26 kg',
+        radius: '58,232 km',
+        orbital_speed: '9.69 km/s',
+    },
+    [uranusData.planet.uuid]: {
+        name: 'Uranus',
+        mass: '8.681 × 10^25 kg',
+        radius: '25,362 km',
+        orbital_speed: '6.81 km/s',
     }
 };
 
@@ -141,6 +184,12 @@ statsButtons.addEventListener('click', (event) => {
             planetUUID = venusData.planet.uuid;
         } else if (planetName === 'mars') {
             planetUUID = marsData.planet.uuid;
+        } else if (planetName === 'jupiter') {
+            planetUUID = jupiterData.planet.uuid;
+        } else if (planetName === 'saturn') {
+            planetUUID = saturnData.planet.uuid;
+        } else if (planetName === 'uranus') {
+            planetUUID = uranusData.planet.uuid;
         }
 
         if (planetUUID) {
@@ -158,11 +207,27 @@ statsButtons.querySelector('button[data-planet="earth"]').classList.add('active'
 function animate() {
     requestAnimationFrame(animate);
 
+    // Update controls
+    controls.update();
+
     // Rotation
     sun.rotation.y += 0.001;
+    const maxTrailPoints = 200; // Adjust for longer/shorter trails
+    const worldPosition = new THREE.Vector3();
+
     planets.forEach(p => {
         p.pivot.rotation.y += p.orbitSpeed;
         p.planet.rotation.y += 0.01; // Add self-rotation
+
+        // Update trail
+        p.planet.getWorldPosition(worldPosition);
+        p.trailPoints.push(worldPosition.clone());
+
+        if (p.trailPoints.length > maxTrailPoints) {
+            p.trailPoints.shift();
+        }
+
+        p.trail.geometry.setFromPoints(p.trailPoints);
     });
 
     renderer.render(scene, camera);

index.php

@@ -13,6 +13,9 @@
             <button data-planet="venus">Venus</button>
             <button data-planet="earth">Earth</button>
             <button data-planet="mars">Mars</button>
+            <button data-planet="jupiter">Jupiter</button>
+            <button data-planet="saturn">Saturn</button>
+            <button data-planet="uranus">Uranus</button>
         </div>
         <div id="stats-info"></div>
     </div>