index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Solar System Simulation</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        canvas { display: block; }

        #ui-container {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: auto;
        }

        .control-group { margin-bottom: 10px; }
        label { display: block; font-size: 12px; margin-bottom: 5px; color: #aaa; }
        input[type="range"] { width: 200px; cursor: pointer; }

        #sim-date {
            font-family: monospace;
            font-size: 18px;
            color: #00ffcc;
            margin-bottom: 10px;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
        }

        .instructions {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }
    </style>
</head>
<body>

    <div id="ui-container">
        <div id="sim-date">Date: Jan 01, 2000</div>
        <div class="control-group">
            <label>Simulation Speed</label>
            <input type="range" id="speedSlider" min="0" max="50" step="0.1" value="1">
        </div>
    </div>

    <div class="instructions">
        Left Click: Orbit | Right Click: Pan | Scroll: Zoom
    </div>

    <!-- Load Three.js and OrbitControls via CDN -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // --- Configuration & Data ---
        const planetData = [
            { name: "Mercury", color: 0x8c8c8c, size: 0.8, distance: 15, speed: 0.047 },
            { name: "Venus",   color: 0xe3bb76, size: 1.8, distance: 25, speed: 0.035 },
            { name: "Earth",    color: 0x2271b3, size: 2.0, distance: 35, speed: 0.029 },
            { name: "Mars",     color: 0xe27b58, size: 1.4, distance: 45, speed: 0.024 },
            { name: "Jupiter",  color: 0xd39c7e, size: 6.0, distance: 70, speed: 0.013 },
            { name: "Saturn",   color: 0xc5ab6e, size: 5.0, distance: 95, speed: 0.009, hasRings: true },
            { name: "Uranus",   color: 0xbbe1e4, size: 3.5, distance: 115, speed: 0.006 },
            { name: "Neptune",  color: 0x6081ff, size: 3.4, distance: 130, speed: 0.005 }
        ];

        // --- Scene Setup ---
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.set(80, 60, 120);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // --- Lighting ---
        const ambientLight = new THREE.AmbientLight(0x333333);
        scene.add(ambientLight);

        const sunLight = new THREE.PointLight(0xffffff, 3000, 500);
        scene.add(sunLight);

        // --- Objects Construction ---
        
        // Starfield Background
        const starGeometry = new THREE.BufferGeometry();
        const starMaterial = new THREE.PointsMaterial({ color: 0xffffff });
        const starVertices = [];
        for (let i = 0; i < 10000; i++) {
            const x = (Math.random() - 0.5) * 2000;
            const y = (Math.random() - 0.5) * 2000;
            const z = (Math.random() - 0.5) * 2000;
            starVertices.push(x, y, z);
        }
        starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
        const stars = new THREE.Points(starGeometry, starMaterial);
        scene.add(stars);

        // The Sun
        const sunGeo = new THREE.SphereGeometry(8, 32, 32);
        const sunMat = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
        const sun = new THREE.Mesh(sunGeo, sunMat);
        scene.add(sun);

        // Planets and Orbits
        const planetMeshes = [];

        planetData.forEach((data) => {
            // Orbit Ring (Visual Cosmetic)
            const orbitGeo = new THREE.RingGeometry(data.distance - 0.1, data.distance + 0.1, 128);
            const orbitMat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: true, opacity: 0.1 });
            const orbitRing = new THREE.Mesh(orbitGeo, orbitMat);
            orbitRing.rotation.x = Math.PI / 2;
            scene.add(orbitRing);

            // Planet Mesh
            const geo = new THREE.SphereGeometry(data.size, 32, 32);
            const mat = new THREE.MeshStandardMaterial({ color: data.color });
            const mesh = new THREE.Mesh(geo, mat);
            
            // Group to handle rotation around Sun easily
            const orbitGroup = new THREE.Group();
            scene.add(orbitGroup);
            orbitGroup.add(mesh);
            
            mesh.position.x = data.distance;

            // Saturn's Rings
            if (data.hasRings) {
                const ringGeo = new THREE.RingGeometry(data.size + 1, data.size + 5, 64);
                const ringMat = new THREE.MeshBasicMaterial({ color: 0x887766, side: THREE.DoubleSide, transparent: true, opacity: 0.6 });
                const rings = new THREE.Mesh(ringGeo, ringMat);
                rings.rotation.x = Math.PI / 2.5;
                mesh.add(rings);
            }

            // Floating Label (Sprite)
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = 128;
            canvas.height = 64;
            context.fillStyle = 'white';
            context.font = 'bold 32px Arial';
            context.fillText(data.name, 10, 40);
            
            const texture = new THREE.CanvasTexture(canvas);
            const spriteMat = new THREE.SpriteMaterial({ map: texture });
            const sprite = new THREE.Sprite(spriteMat);
            sprite.position.y = data.size + 3;
            sprite.scale.set(10, 5, 1);
            mesh.add(sprite);

            planetMeshes.push({
                mesh: mesh,
                group: orbitGroup,
                speed: data.speed,
                distance: data.distance
            });
        });

        // --- UI Logic ---
        const speedSlider = document.getElementById('speedSlider');
        const dateDisplay = document.getElementById('sim-date');
        let simTime = new Date(2000, 0, 1).getTime();

        // --- Animation Loop ---
        function animate() {
            requestAnimationFrame(animate);

            const speedMultiplier = parseFloat(speedSlider.value);

            planetMeshes.forEach((p) => {
                // Rotate group to simulate orbit
                p.group.rotation.y += p.speed * 0.5 * speedMultiplier;
                // Self-rotation of planet
                p.mesh.rotation.y += 0.01;
            });

            // Update Simulation Date
            const elapsed = (Date.now() - simTime) * speedMultiplier * 0.1; 
            // Note: This is a visual time jump, not real-time seconds for realism 
            // because actual orbital periods are huge. We're scaling it to be "watchable".
            const currentSimDate = new Date(2000, 0, 1);
            currentSimDate.setTime(currentSimDate.getTime() + (elapsed * 1000));
            dateDisplay.innerText = `Date: ${currentSimDate.toLocaleDateString('en-US', { 
                year: 'numeric', month: 'short', day: 'numeric' 
            })}`;

            controls.update();
            renderer.render(scene, camera);
        }

        // Handle Window Resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html>