Solar System 3D Explorer – Interactive Planets Model Using HTML CSS JS | FREE SOURCE CODE

Explore our solar system in 3D with this free, interactive space project. Built using Three.js & Tailwind CSS. Download ZIP or copy the full source code.

Monday, July 14, 2025
Solar System 3D Explorer – Interactive Planets Model Using HTML CSS JS | FREE SOURCE CODE

🌌 Explore the Universe with Our 3D Solar System Project – Free Code & Download

Have you ever wondered what it would be like to travel through space and see all the planets of our solar system up close? With our brand new Solar System Explorer, you can do just that — right from your browser. This interactive 3D space project is now available for free to explore, copy the code, or download as a ZIP file!

Whether you're a student, teacher, aspiring developer, or space enthusiast, this project offers a fun and educational way to learn about our cosmic neighborhood while also gaining hands-on experience with 3D web development.

🚀 What is the Solar System Explorer?

Solar System Explorer is a fully interactive 3D model of the solar system built using the powerful Three.js JavaScript library, styled with Tailwind CSS, and structured with clean, semantic HTML. It visualizes all major celestial bodies — including the Sun, Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, and even the Moon — orbiting in real-time.

This isn't just a static model. The planets rotate, orbit, and come with textured surfaces, giving the illusion of depth and realism. The space is filled with twinkling stars, asteroid belts, and smooth camera controls that let you zoom, pan, and rotate the view — all within your browser, without installing anything.



✨ Features That Make It Stand Out

🌍 Realistic Planetary Motion

Each planet orbits around the sun with a unique speed and distance, simulating the actual layout of our solar system. You'll even find moons orbiting planets, just like in reality.

🛰️ Fully Interactive Controls

Thanks to OrbitControls from Three.js, users can freely explore the space by dragging the mouse or using touch gestures. Zoom in to see the rings of Saturn or rotate around to observe the asteroid belt between Mars and Jupiter.

🌟 Dynamic Stars & Asteroids

The universe is brought to life with a backdrop of twinkling stars and hundreds of randomly placed asteroids to mimic the richness of space.

🎨 Beautiful Visuals with Tailwind CSS

While the 3D magic happens behind the scenes with JavaScript, the user interface and design are made modern and mobile-friendly using Tailwind CSS. It’s clean, minimal, and works across all screen sizes.

📦 Easy to Use & Customize

The entire project is lightweight, easy to run, and fully open-source. You can edit the textures, colors, or even add more planets and features if you like.

💡 Who is This Project For?

This solar system simulation is perfect for:

  • 🔭 Students learning astronomy or computer science

  • 🧑‍🏫 Teachers looking for an interactive teaching tool

  • 👨‍💻 Web developers wanting to experiment with Three.js

  • 👩‍🚀 Space lovers and hobbyists exploring planetary systems

  • 🧠 Anyone curious about building 3D experiences on the web

You don’t need any special hardware or software — just open it in your browser and start your space journey.

📁 Download or Copy the Code – 100% Free

We believe in sharing knowledge. That’s why we’ve made this entire project available to everyone for free. You can:

✅ View and copy the full source code
✅ Download the ZIP file and run it offline
✅ Customize it for your school project or personal website
✅ Use it as inspiration for your portfolio or resume





HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System Explorer</title>
            <link href="style.css" rel="stylesheet" type="text/css" />

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts - Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Three.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- OrbitControls for Three.js -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

</head>
<body class="bg-black text-white">

    <div id="three-js-container"></div>

    <header class="overlay-content w-full max-w-4xl text-center p-4 absolute top-0 left-1/2 -translate-x-1/2">
        <h1 class="text-4xl sm:text-5xl font-bold text-yellow-300 mb-2 drop-shadow-lg">
            Solar System Explorer
        </h1>
        <p class="text-lg text-gray-300">Journey through our cosmic neighborhood!</p>
    </header>

    <div id="infoPanel" class="info-panel text-center"></div>

        <script src="min.js"></script>

</body>
</html>

CSS Code

        body {
            font-family: 'Inter', sans-serif;
            overflow: hidden;
        }
        #three-js-container {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
        }
        #three-js-container canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        .overlay-content {
            position: relative;
            z-index: 1;
            pointer-events: none;
        }
        .overlay-content * {
            pointer-events: auto;
        }
        .label {
            color: white;
            font-size: 0.8rem;
            position: absolute;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            pointer-events: none;
        }
        .info-panel {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            padding: 1rem 2rem;
            border-radius: 8px;
            color: white;
            z-index: 10;
            display: none;
        }

JavaScript Code

        let scene, camera, renderer, controls;
        const planets = [];
        const asteroids = [];
        const labels = {};
        const textureLoader = new THREE.TextureLoader();

        const solarSystemData = [
            { id: 'sun', name: 'Sun', size: 1.5, color: 0xFFA500, orbitRadius: 0, rotationSpeed: 0.005, emissive: 0xFFA500, emissiveIntensity: 1.5, texture: 'https://placehold.co/512x512/FFA500/FFFFFF?text=Sun' },
            { id: 'mercury', name: 'Mercury', size: 0.1, color: 0xA9A9A9, orbitRadius: 3, orbitSpeed: 0.01, rotationSpeed: 0.02, texture: 'https://placehold.co/256x256/A9A9A9/FFFFFF?text=Mercury' },
            { id: 'venus', name: 'Venus', size: 0.25, color: 0xFFD700, orbitRadius: 4.5, orbitSpeed: 0.007, rotationSpeed: 0.015, texture: 'https://placehold.co/256x256/FFD700/FFFFFF?text=Venus' },
            { id: 'earth', name: 'Earth', size: 0.3, color: 0x0000FF, orbitRadius: 6, orbitSpeed: 0.005, rotationSpeed: 0.01, texture: 'https://placehold.co/256x256/0000FF/FFFFFF?text=Earth' },
            { id: 'moon', name: 'Moon', size: 0.08, color: 0xD3D3D3, orbitRadius: 0.8, orbitSpeed: 0.05, rotationSpeed: 0.03, parentPlanetId: 'earth', texture: 'https://placehold.co/128x128/D3D3D3/000000?text=Moon' },
            { id: 'mars', name: 'Mars', size: 0.18, color: 0xFF4500, orbitRadius: 8, orbitSpeed: 0.004, rotationSpeed: 0.009, texture: 'https://placehold.co/256x256/FF4500/FFFFFF?text=Mars' },
            { id: 'jupiter', name: 'Jupiter', size: 0.9, color: 0xD2B48C, orbitRadius: 12, orbitSpeed: 0.002, rotationSpeed: 0.008, texture: 'https://placehold.co/512x512/D2B48C/000000?text=Jupiter' },
            { id: 'saturn', name: 'Saturn', size: 0.75, color: 0xF4A460, orbitRadius: 15, orbitSpeed: 0.0015, rotationSpeed: 0.007, hasRing: true, texture: 'https://placehold.co/512x512/F4A460/000000?text=Saturn' },
            { id: 'uranus', name: 'Uranus', size: 0.6, color: 0xADD8E6, orbitRadius: 18, orbitSpeed: 0.001, rotationSpeed: 0.006, texture: 'https://placehold.co/512x512/ADD8E6/000000?text=Uranus' },
            { id: 'neptune', name: 'Neptune', size: 0.55, color: 0x4169E1, orbitRadius: 21, orbitSpeed: 0.0008, rotationSpeed: 0.005, texture: 'https://placehold.co/512x512/4169E1/FFFFFF?text=Neptune' }
        ];

        function initThreeJS() {
            const container = document.getElementById('three-js-container');
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);
            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
            camera.position.set(0, 10, 30);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(container.clientWidth, container.clientHeight);
            container.appendChild(renderer.domElement);
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            const sunLight = new THREE.PointLight(0xffffff, 2, 500);
            scene.add(sunLight);
            const ambientLight = new THREE.AmbientLight(0x111111);
            scene.add(ambientLight);
            createSolarSystemObjects();
            createStars();
            createAsteroids(200);
            animate();
            window.addEventListener('resize', onWindowResize);
        }

        function createSolarSystemObjects() {
            const infoPanel = document.getElementById('infoPanel');
            solarSystemData.forEach(data => {
                let mesh, objectGroup = new THREE.Object3D();
                if (data.id === 'sun') {
                    const geometry = new THREE.SphereGeometry(data.size, 64, 64);
                    const texture = textureLoader.load(data.texture);
                    const material = new THREE.MeshBasicMaterial({ map: texture, emissive: data.emissive, emissiveIntensity: data.emissiveIntensity });
                    mesh = new THREE.Mesh(geometry, material);
                    mesh.name = data.name;
                    scene.add(mesh);
                } else {
                    const geometry = new THREE.SphereGeometry(data.size, 32, 32);
                    const texture = textureLoader.load(data.texture);
                    const material = new THREE.MeshPhongMaterial({ map: texture });
                    mesh = new THREE.Mesh(geometry, material);
                    mesh.name = data.name;
                    if (!data.parentPlanetId && data.orbitRadius > 0) {
                        const orbitGeo = new THREE.RingGeometry(data.orbitRadius - 0.02, data.orbitRadius + 0.02, 128);
                        const orbitMat = new THREE.MeshBasicMaterial({ color: 0x333333, side: THREE.DoubleSide });
                        const orbit = new THREE.Mesh(orbitGeo, orbitMat);
                        orbit.rotation.x = Math.PI / 2;
                        scene.add(orbit);
                    }
                    if (data.parentPlanetId) {
                        const parent = planets.find(p => p.id === data.parentPlanetId);
                        if (parent) {
                            objectGroup.add(mesh);
                            parent.mesh.add(objectGroup);
                            mesh.position.x = data.orbitRadius;
                        }
                    } else {
                        objectGroup.add(mesh);
                        scene.add(objectGroup);
                        mesh.position.x = data.orbitRadius;
                    }
                    if (data.hasRing) {
                        const ringGeo = new THREE.TorusGeometry(data.size * 1.2, data.size * 0.3, 2, 100);
                        const ringMat = new THREE.MeshBasicMaterial({ color: 0x8B4513, side: THREE.DoubleSide });
                        const ring = new THREE.Mesh(ringGeo, ringMat);
                        ring.rotation.x = Math.PI / 2;
                        mesh.add(ring);
                    }
                    mesh.userData = { info: `${data.name}` };
                    mesh.cursor = 'pointer';
                    mesh.onClick = () => {
                        infoPanel.innerHTML = `<strong>${data.name}</strong><br>${data.texture}`;
                        infoPanel.style.display = 'block';
                    };
                }
                planets.push({ id: data.id, name: data.name, mesh, objectGroup, orbitRadius: data.orbitRadius, orbitSpeed: data.orbitSpeed, rotationSpeed: data.rotationSpeed });
            });
        }

        function createStars() {
            const geo = new THREE.SphereGeometry(0.05, 8, 8);
            const mat = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
            for (let i = 0; i < 5000; i++) {
                const star = new THREE.Mesh(geo, mat);
                star.position.set((Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200);
                scene.add(star);
            }
        }

        function createAsteroids(count) {
            const geo = new THREE.SphereGeometry(0.05, 8, 8);
            const mat = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
            for (let i = 0; i < count; i++) {
                const mesh = new THREE.Mesh(geo, mat);
                const radius = 9 + Math.random() * 2;
                const angle = Math.random() * Math.PI * 2;
                const y = (Math.random() - 0.5) * 2;
                mesh.position.set(Math.cos(angle) * radius, y, Math.sin(angle) * radius);
                asteroids.push({ mesh, orbitRadius: radius, initialAngle: angle, orbitSpeed: (Math.random() - 0.5) * 0.001 });
                scene.add(mesh);
            }
        }

        function animate() {
            requestAnimationFrame(animate);
            planets.forEach(p => {
                if (p.mesh) p.mesh.rotation.y += p.rotationSpeed;
                if (p.objectGroup && p.id !== 'sun') p.objectGroup.rotation.y += p.orbitSpeed;
            });
            asteroids.forEach(a => {
                a.initialAngle += a.orbitSpeed;
                a.mesh.position.x = Math.cos(a.initialAngle) * a.orbitRadius;
                a.mesh.position.z = Math.sin(a.initialAngle) * a.orbitRadius;
            });
            controls.update();
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            const container = document.getElementById('three-js-container');
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
        }

        window.onload = function () {
            initThreeJS();
        };

PHP Code

NO Need
Show Result

🔧 Technologies Used

Here are the key technologies powering the Solar System Explorer:

  • HTML5 – For structure and layout

  • Tailwind CSS – For responsive and modern UI styling

  • JavaScript (Three.js) – For 3D rendering and animation

  • OrbitControls.js – For interactive camera movement

  • CDNs – For faster loading and zero installation

All scripts and libraries are included via CDN links, so you don’t need to install any external packages.

📚 Learning Outcomes

By exploring or modifying this project, you’ll gain experience in:

  • 3D object creation and animation

  • Texture mapping and material customization

  • JavaScript classes and object handling

  • Orbit simulation and geometry positioning

  • UI/UX design with Tailwind CSS

  • Responsive layouts and web optimization

This is a practical, real-world project that can add serious value to your development portfolio.

📝 Final Thoughts

Our 3D Solar System Explorer is more than just a fun experience — it’s an educational, interactive, and open-source tool that combines science, creativity, and code. Whether you’re building your knowledge or just having fun exploring planets, this project gives you a solid foundation in both astronomy and web development.

We encourage you to play with the code, make improvements, and even share it with others. The universe is vast — and now you can explore it, one planet at a time.

🚀 "Space is big. Really big. You just won't believe how vastly, hugely, mind-bogglingly big it is..." – Douglas Adams

📥 Get Started Today!

🔻 Click below to view, copy, or download the complete Solar System Explorer project.
No signup. No paywall. Just free, high-quality educational content.






Leave a Comment: 👇