script.js

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById('container').appendChild(renderer.domElement);

function createStarField() {
    const geometry = new THREE.BufferGeometry();
    const vertices = []

    for (let i = 0; i < 10000; i++) {
        vertices.push(
            (Math.random() - 0.5) * 2000,
            (Math.random() - 0.5) * 2000,
            (Math.random() - 0.5) * 2000
        );
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    const material = new THREE.PointsMaterial({color: 0xffffff, size: 1});
    const stars = new THREE.Points(geometry, material);
    scene.add(stars);
}

const planetData = {
    sun: { size: 8, distance: 0, speed: 0, color: 0xffff00, name: "Sun", 
        info: "Our Sun is a G-type main-sequence star. It contains 99.86% of the mass in our solar system and generates energy through nuclear fusion." },
    mercury: { size: 0.8, distance: 15, speed: 4.15, color: 0x8c7853, name: "Mercury", 
        info: "The smallest planet and closest to the Sun. Mercury has extreme temperature variations and no atmosphere to retain heat." },
    venus: { size: 1.2, distance: 20, speed: 1.62, color: 0xffc649, name: "Venus", 
        info: "Known as Earth's twin, Venus has a thick, toxic atmosphere and is the hottest planet in our solar system." },
    earth: { size: 1.3, distance: 25, speed: 1.0, color: 0x6b93d6, name: "Earth", 
        info: "Our home planet! Earth is the only known planet to harbor life, with 71% of its surface covered by water." },
    mars: { size: 1.0, distance: 32, speed: 0.53, color: 0xc1440e, name: "Mars", 
        info: "The Red Planet gets its color from iron oxide (rust). Mars has the largest volcano in the solar system, Olympus Mons." },
    jupiter: { size: 4, distance: 50, speed: 0.084, color: 0xd8ca9d, name: "Jupiter", 
        info: "The largest planet in our solar system. Jupiter is a gas giant with over 80 moons, including the four large Galilean moons." },
    saturn: { size: 3.5, distance: 70, speed: 0.034, color: 0xfad5a5, name: "Saturn", 
        info: "Famous for its spectacular ring system. Saturn is less dense than water and has 146 known moons." },
    uranus: { size: 2.5, distance: 90, speed: 0.012, color: 0x4fd0e3, name: "Uranus", 
        info: "An ice giant that rotates on its side. Uranus has a unique blue-green color due to methane in its atmosphere." },
    neptune: { size: 2.4, distance: 110, speed: 0.006, color: 0x4b70dd, name: "Neptune", 
        info: "The windiest planet with speeds up to 2,100 km/h. Neptune takes 165 Earth years to orbit the Sun." }
};
    
const planets = {};
const orbits = {}
let animationSpeed = 1.0;
let isPaused = false;
let showOrbits = true;

function createPlanet(key, data) {
    const geometry = new THREE.SphereGeometry(data.size, 32, 32);
    const material = new THREE.MeshPhongMaterial({color: data.color});
    const planet = new THREE.Mesh(geometry, material);

    planet.userData = { name: data.name, info: data.info, key: key};

    if (key === 'sun'){
        planet.position.set(0, 0, 0);
        const light = new THREE.PointLight(0xffffff, 2, 300);
        light.position.set(0, 0, 0);
        light.castShadow = true;
        scene.add(light);

        const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
        scene.add(ambientLight);
    } else {
        planet.position.set(data.distance, 0 ,0);
        planet.castShadow = true;
        planet.receiveShadow = true;

        const orbitGeometry = new THREE.RingGeometry(data.distance - 0.1, data.distance + 0.1, 64);
        const orbitMaterial = new THREE.MeshBasicMaterial({
            color: 0x444444,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 0.3
        });
        const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
        orbit.rotation.x = Math.PI / 2;
        orbits[key] = orbit;
        scene.add(orbit);
    }

    planets[key] = planet;
    scene.add(planet);
}

Object.keys(planetData).forEach(key => {
    createPlanet(key, planetData[key])
});

const saturnRingsGeometry = new THREE.RingGeometry(4.5, 6.5, 32);
const saturnRingsMaterial = new THREE.MeshPhongMaterial({
    color: 0xaaaaaa,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.6
});

const saturnRings = new THREE.Mesh(saturnRingsGeometry, saturnRingsMaterial);
saturnRings.rotation.x = Math.PI / 2;
planets.saturn.add(saturnRings);

createStarField();

camera.position.set(0, 50, 150);
camera.lookAt(0, 0, 0);

let mouseX = 0, mouseY = 0;
let mouseDown = false;
let cameraAngle = 0;
let cameraHeight = 50;
let cameraDistance = 200;

renderer.domElement.addEventListener('mousedown', (event) => {
    mouseDown = true;
    mouseX = event.clientX;
    mouseY = event.clientY;
})

renderer.domElement.addEventListener('mouseup', () => {
    mouseDown = false;
})

renderer.domElement.addEventListener('mousemove', (event) => {
    if (mouseDown) {
        const deltaX = event.clientX - mouseX;
        const deltaY = event.clientY - mouseY;

        cameraAngle += deltaX * 0.01;
        cameraHeight += deltaY * 0.5;
        cameraHeight = Math.max(-100, Math.min(100, cameraHeight));

        mouseX = event.clientX;
        mouseY = event.clientY;
    }
});

renderer.domElement.addEventListener('wheel', (event) => {
    cameraDistance += event.deltaY * 0.1;
    cameraDistance = Math.max(50, Math.min(500, cameraDistance));
});

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

renderer.domElement.addEventListener('click', (event) => {
    if (!mouseDown) {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(Object.values(planets));

        if (intersects.length > 0) {
            const planet = intersects[0].object;
            showPlanetInfo(planet.userData.name, planet.userData.info);
        }
    }
});

const playPauseBtn = document.getElementById("play-pause");
const resetCameraBtn = document.getElementById('reset-camera');
const toggleOrbitBtn = document.getElementById('toggle-orbits');
const speedSlider = document.getElementById('speed-slider');
const speedValue = document.getElementById('speed-value');
const zoomSlider = document.getElementById('zoom-slider');
const infoPanel = document.getElementById('info-panel');

playPauseBtn.addEventListener('click', () => {
    isPaused = !isPaused;
    playPauseBtn.textContent = isPaused ? "▶️ Play" : "⏸️ Pause";
});

resetCameraBtn.addEventListener('click', () => {
    cameraAngle = 0;
    cameraHeight = 50;
    cameraDistance = 200;
    hideInfo();
});

toggleOrbitBtn.addEventListener('click', () => {
    showOrbits = !showOrbits;
    Object.values(orbits).forEach(orbit => {
        orbit.visible = showOrbits;
    });
    toggleOrbitBtn.textContent = showOrbits ? "🔄 Hide Orbits" : "🔄 Show Orbits";
});

speedSlider.addEventListener('input', (e) => {
    animationSpeed = parseFloat(e.target.value);
    speedValue.textContent = animationSpeed.toFixed(1) + 'x';
});

zoomSlider.addEventListener('input', (e) => {
    cameraDistance = parseInt(e.target.value);
});

function showPlanetInfo(name, info) {
    document.querySelector('.planet-name').textContent = name;
    document.querySelector('.planet-info').textContent = info;
    infoPanel.style.display = 'block';
}

function hideInfo() {
    infoPanel.style.display = "none";
}

document.addEventListener('click', (event) => {
    if (!infoPanel.contains(event.target) &&
        !renderer.domElement.contains(event.target)) {
            hideInfo();
        }
});

let time = 0;

function animate() {
    requestAnimationFrame(animate);

    if (!isPaused) {
        time += 0.01 * animationSpeed;
        Object.keys(planetData).forEach(key => {
            const data = planetData[key];
            const planet = planets[key];

            if (key !== 'sun'){ 
                const angle = time * data.speed;
                planet.position.x = Math.cos(angle) * data.distance;
                planet.position.z = Math.sin(angle) * data.distance;

                planet.rotation.y += 0.01;
            } else {
                planet.rotation.y += 0.005;
            }
        });
    }

    const x = Math.cos(cameraAngle) * cameraDistance;
    const z = Math.sin(cameraAngle) * cameraDistance;
    camera.position.set(x, cameraHeight, z);
    camera.lookAt(0, 0, 0);

    renderer.render(scene, camera);
}

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

animate();