3d-solar-system-globe

🚀 Live Preview & Playground  |  🎨 UI Examples  |  📖 Documentation  |  📦 NPM  |  ⭐ GitHub

Explore all components interactively, browse UI examples (Galaxy, Saturn, Earth landing pages), and follow the full installation guide at www.3dsolarsystem.space.

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

🌐 Live Preview, Playground & Docs

Visit 3dsolarsystem.space for:

| Section | Link | Description | |---|---|---| | 🚀 Playground | 3dsolarsystem.space | Interact with every 3D component live in the browser — tweak parameters and see results instantly | | 🎨 UI Examples | UI Examples | Pre-built landing page examples: Galaxy, Saturn, and Earth | | 📖 Documentation | Guide | Step-by-step install & usage guide with code snippets | | 🗂️ All Manifests | Manifests | Browse all available components: Data Mesh Globe, Earth Tower Link, Mars, Jupiter, Solar System, and more | | 📦 NPM Package | 3d-solar-system-globe | Install via npm — view versions, weekly downloads, and bundle info | | ⭐ GitHub Repo | Aditya-567/3D-Cosmos-ui | Source code, issues, contributions, and full project history |

🎖 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.7}
    ringInnerRadius = {1.05}
    ringWidth = {0.75}
    ringParticleCount = {300000}
    saturnRotationSpeed = {0.0015}
    ringRotationSpeed = {0.011}
    particleRotationSpeed = {0.006} // New attribute for particle ring speed
    tilt = {26.7} // Axial tilt in degrees
    ringRotation = {0} // Initial ring rotation in degrees
    starCount = {8000}
    autoRotate = {true}
    bgEnabled = {true}
    starAngle = {0}
    cameraAngle = {18}
    cameraDistance = {3.2}
    cameraFov = {45}
    bgImageOpacity = {0.6}
    containerHeight = '100vh'
/>

📚 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.

Component Attributes Reference

DotGlobe

<DotGlobe
  // Globe
  cameraZ={7.5}
  maxParticles={200000}
  dotColor={0x4ade80}
  // Atmosphere
  atmosphereColor={0x4ade80}
  atmosphereOpacity={0.07}
  // Floating particles
  floatCount={150}
  floatColor={0x4ade80}
  // Lighting
  lightColor={0x4ade80}
  // Animation
  autoRotateSpeed={0.002}
  floatRotateSpeed={0.0005}
  mouseInfluence={0.3}
  // Background
  starCount={30000}
  // Layout
  containerHeight="100vh"
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

DotGlobeWithDataLink

<DotGlobeWithDataLink
  maxParticles={40000}
  maxLines={100}
  pointsPerLine={60}
  particleColor={0x4ade80}
  beamSpeed={0.8}
  autoRotateSpeed={0.0015}
  backgroundStarCount={20000}
  cameraZ={7.5}
  showBeams={true}
  // Layout
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

EarthAndMoon

<EarthAndMoon
  earthSize={0.6}
  moonSize={0.09}
  moonDistance={1.0}
  moonOrbitSpeed={0.02}
  earthRotationSpeed={0.001}
  cloudOpacity={0.4}
  atmosphereOpacity={0.15}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

EarthAndSatellite

<EarthAndSatellite
  earthSize={0.6}
  satelliteCount={30}
  satelliteSpeed={0.0015}
  satelliteSpeedVariation={0.004}
  satelliteOrbitRadius={0.72}
  satelliteOrbitVariation={0.12}
  beamFrequency={0.03}
  beamColor={0x10b981}
  beamFadeSpeed={0.02}
  starCount={3000}
  earthRotationSpeed={0.001}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

EarthMoonSatellite

<EarthMoonSatellite
  earthSize={0.6}
  moonSize={0.09}
  moonDistance={0.9}
  moonOrbitSpeed={0.02}
  satelliteCount={60}
  satelliteSpeed={0.0015}
  satelliteSpeedVariation={0.004}
  satelliteOrbitRadius={0.72}
  satelliteOrbitVariation={0.12}
  starCount={8000}
  earthRotationSpeed={0.01}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

EarthWithTower

<EarthWithTower
  earthSize={0.6}
  starCount={3000}
  signalSpeed={0.012}
  signalTrailLength={30}
  beamColors={[0x00ffcc, 0xff9900]}
  earthRotationSpeed={0.001}
  showTowers={true}
  showSignals={true}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Mercury

<Mercury
  mercurySize={0.6}
  mercuryRotationSpeed={0.001}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Venus

<Venus
  venusSize={0.6}
  venusRotationSpeed={0.001}
  atmosphereOpacity={0.15}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Mars

<Mars
  marsSize={0.6}
  phobosSize={0.05}
  deimosSize={0.04}
  phobosDistance={0.8}
  deimosDistance={1.2}
  phobosOrbitSpeed={0.03}
  deimosOrbitSpeed={0.015}
  marsRotationSpeed={0.001}
  orbitOpacity={0.06}
  tailOpacity={0.8}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  bgImageOpacity={0.4}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Jupiter

<Jupiter
  jupiterSize={0.8}
  jupiterRotationSpeed={0.002}
  ringInnerRadius={1.6}
  ringOuterRadius={1.8}
  ringParticleCount={40000}
  ringRotationSpeed={0.005}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={3.2}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Saturn

<Saturn
  saturnSize={0.7}
  ringInnerRadius={1.05}
  ringWidth={0.75}
  ringParticleCount={300000}
  saturnRotationSpeed={0.0015}
  ringRotationSpeed={0.011}
  particleRotationSpeed={0.006}
  tilt={26.7}
  ringRotation={0}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={18}
  cameraDistance={3.2}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Uranus

<Uranus
  uranusSize={0.65}
  ringInnerRadius={0.85}
  ringWidth={0.25}
  ringParticleCount={30000}
  uranusRotationSpeed={0.0012}
  ringRotationSpeed={0.0008}
  particleRotationSpeed={0.008}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={3.2}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Neptune

<Neptune
  neptuneSize={0.65}
  neptuneRotationSpeed={0.0013}
  ringInnerRadius={1.2}
  ringOuterRadius={1.35}
  ringParticleCount={25000}
  ringRotationSpeed={0.005}
  atmosphereOpacity={0.15}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={2.8}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

Pluto

<Pluto
  plutoSize={0.7}
  plutoRotationSpeed={0.0008}
  starCount={8000}
  autoRotate={true}
  bgEnabled={true}
  starAngle={0}
  cameraAngle={0}
  cameraDistance={4.5}
  cameraFov={45}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

SolarSystem

<SolarSystem
  sunSize={5.0}
  planetSpeedMultiplier={1.0}
  starCount={9000}
  asteroidCount={1900}
  kuiperCount={9000}
  showOrbits={true}
  showTrails={true}
  initialDistance={280}
  autoRotate={true}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

SolarSystemWithFeatures

<SolarSystemWithFeatures
  containerHeight="100vh"
  mouseInteractive={true}
/>

Galaxy

<Galaxy
  stars={100000}
  radius={5.4}
  arms={4}
  coreSize={1.6}
  spinCurvature={1.8}
  randomness={0.36}
  innerColor="#ffaa60"
  outerColor="#1b3984"
  starSize={0.05}
  rotationSpeed={0.05}
  tilting={{ x: 0.9, y: 0 }}
  cameraAngle={38}
  cameraDistance={8}
  cameraFov={75}
  starAngle={0}
  enableOptions={true}
  enableStarsBg={true}
  movingStarsBg={true}
  enableImageBg={true}
  bgImageOpacity={0.6}
  textureBaseUrl="https://cdn.jsdelivr.net/gh/Aditya-567/3D-Planets@main/public"
  containerHeight="100vh"
  mouseInteractive={true}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
  className=""
  style={{}}
/>

LogoWithRotatingText

<LogoWithRotatingText
  theme="dark"
  size={96}
  top={undefined}
  bottom={undefined}
  left={undefined}
  right={undefined}
/>