3d-solar-system-globe

A collection of reusable React + Three.js components to render an interactive 3D globe and solar system in web applications. This package provides ready-to-use components such as Earth with satellites, moon systems, data-linked globes and full solar system views.

Just Kidding 😝

✨ Features

• 🌍 3D globe rendering
• 🛰️ Earth with satellite and tower visualizations
• 🌙 Earth–Moon system
• ☀️ Full solar system scene
• ⚡ Built with React and Three.js
• 📦 Easy to plug into any React project

🎖 Installation

npm install 3d-solar-system-globe

🚀 Usage

Import any component you need from the package and render it inside your React app.

import {
  DotGlobe,
  DotGlobeWithDataLink,
  EarthWithTower,
  EarthAndSatellite,
  EarthAndMoon,
  EarthMoonSatellite,
  SolarSystem
} from "3d-solar-system-globe";

function App() {
  return (
    <div>
      <SolarSystem />
    </div>
  );
}

export default App;

Basic Example

<EarthAndMoon 
  earthSize={0.8}
  moonSize={0.12}
  starCount={10000}
/>

Advanced Customization

<Saturn 
  saturnSize={0.9}
  ringInnerRadius={1.2}
  ringWidth={0.9}
  ringParticleCount={500000}
  saturnRotationSpeed={0.002}
  tilt={30}
/>

📚 Available Components

🌍 Earth-Based Components

• DotGlobe - Interactive dotted globe with satellites
• DotGlobeWithDataLink - Globe with data link visualization
• EarthWithTower - Earth with communication towers and signals
• EarthAndSatellite - Earth with orbiting satellites
• EarthAndMoon - Earth-Moon system
• EarthMoonSatellite - Complete Earth system with Moon and satellites

🪐 Planet Components

• Mercury - Smallest planet, closest to the Sun
• Venus - Hottest planet with thick atmosphere
• Mars - Red planet with Phobos and Deimos moons
• Jupiter - Gas giant with faint rings
• Saturn - Gas giant with prominent ring system
• Uranus - Ice giant with thin rings
• Neptune - Ice giant with very faint rings
• Pluto - Dwarf planet

🌌 System Components

• SolarSystem - Complete solar system with all planets
• SolarSystemWithFeatures - Enhanced solar system with UI controls
• Galaxy - Spiral galaxy visualization

🎨 UI Components

• LogoWithRotatingText - Animated logo with rotating text

⚙️ Component Attributes

Each component is highly customizable. For a complete list of all available attributes for each component, see COMPONENT_ATTRIBUTES.md.

Quick Reference

DotGlobe

<DotGlobe 
  cameraZ={7.5}
  maxParticles={20000}
  dotColor={0x4ade80}
  orbitCount={3}
  orbitSpeed={0.015}
  satelliteColor={0x4ade80}
  autoRotateSpeed={0.002}
/>

EarthAndMoon

<EarthAndMoon 
  earthSize={0.6}
  moonSize={0.09}
  moonDistance={1.0}
  moonOrbitSpeed={0.02}
  starCount={8000}
  autoRotate={true}
/>

Saturn

<Saturn 
  saturnSize={0.7}
  ringInnerRadius={1.05}
  ringWidth={0.75}
  ringParticleCount={300000}
  tilt={26.7}
  autoRotate={true}
/>

Galaxy

<Galaxy 
  stars={100000}
  radius={5.4}
  arms={4}
  spinCurvature={1.8}
  innerColor="#ffaa60"
  outerColor="#1b3984"
  rotationSpeed={0.05}
/>