3D Rotating Globe

Interactive 3D earth globe that can be rotated and zoomed using Three.js

Interactive 3D Globe

Drag to rotate • Scroll to zoom

Controls

Stats

Renderer:WebGL
Library:Three.js
Auto Rotate:On
Speed:1.0x
Stars:5,000

You Might Also Like

Explore more tools in this category

Line Chart Creator

Create beautiful line charts with multiple series and customizable options

Histogram Generator

Create histograms with frequency distributions and customizable colors

Heatmap Creator

Create beautiful heatmaps with customizable color schemes and data visualization

Bubble Chart Maker

Create beautiful bubble charts to visualize multi-dimensional data

Area Chart Builder

Create beautiful area charts with customizable data, multiple series, and export options

Pie Chart Maker

Create interactive pie charts by entering values and labels, export as PNG

Bar Graph Generator

Generate bar charts with customizable labels, colors, and axes

Venn Diagram Generator

Create and customize 2 or 3-circle Venn diagrams

Tree Diagram Builder

Create org charts, family trees, and decision trees with collapsible nodes

About 3D Rotating Globe

Interactive Earth Visualization

Explore a 3D representation of Earth powered by Three.js and WebGL. Interact with the globe using intuitive mouse controls and enjoy the realistic space environment with thousands of stars.

Features

  • 3D sphere with 64x64 segments for smooth rendering
  • WebGL-based hardware acceleration
  • Interactive drag-to-rotate controls
  • Smooth zoom with mouse wheel
  • Auto-rotation with adjustable speed
  • 5,000 animated stars background
  • Realistic lighting (ambient + directional + point)
  • Space-themed dark background
  • Damped camera controls
  • Real-time performance

Controls

  • Left Click + Drag: Rotate the globe
  • Right Click + Drag: Pan the camera
  • Mouse Wheel: Zoom in/out
  • Auto Rotate: Toggle automatic rotation
  • Rotation Speed: Adjust speed (0.1-5x)
  • Camera Distance: Control zoom (3-15 units)

Technology

  • Three.js: 3D graphics library
  • React Three Fiber: React renderer for Three.js
  • @react-three/drei: Useful helpers (Sphere, Stars, OrbitControls)
  • WebGL: Hardware-accelerated 3D rendering
  • PBR Materials: Physically-based rendering

Use Cases

  • Educational visualization
  • Geographic presentations
  • Web design inspiration
  • 3D graphics learning
  • Interactive demonstrations