--- /** * ThreeDGlobe — an interactive Earth rendered with plain three.js: a * texture-mapped Blue Marble sphere with terrain bump relief, a key light * plus a cool blue fill, orbit controls with damping and slow auto-rotation, * an optional fresnel atmosphere shader and an optional wireframe overlay. * * Markers pin to latitude/longitude with a thin stem and cone on the * surface and a circular image badge projected over the canvas. Badges are * real buttons: they hide while facing away from the camera, swap the pin * colors on hover, and emit `nular-3d-globe:markerhover` / * `nular-3d-globe:markerclick` DOM events with the marker data. */ interface GlobeMarker { /** Latitude in degrees (positive = north). */ lat: number; /** Longitude in degrees (positive = east). */ lng: number; /** Image shown in the circular badge above the pin. */ src: string; /** Accessible name for the marker button, also sent with marker events. */ label?: string; } interface Props { /** Markers to pin on the globe. */ markers?: GlobeMarker[]; /** Globe radius in scene units. */ radius?: number; /** Fallback sphere color used if the Earth texture fails to load. */ globeColor?: string; /** URL of the Earth color texture (equirectangular). */ textureUrl?: string; /** URL of the bump/elevation map for terrain relief. */ bumpMapUrl?: string; /** Whether to show the atmosphere glow shell. */ showAtmosphere?: boolean; /** Atmosphere glow color. */ atmosphereColor?: string; /** Atmosphere glow intensity. */ atmosphereIntensity?: number; /** Atmosphere softness (higher = more diffuse fresnel falloff). */ atmosphereBlur?: number; /** Terrain bump scale (0 = flat, higher = more pronounced). */ bumpScale?: number; /** Auto-rotate speed (0 disables auto-rotation). */ autoRotateSpeed?: number; /** Allow zooming with wheel/pinch. */ enableZoom?: boolean; /** Allow panning. */ enablePan?: boolean; /** Minimum camera distance when zooming. */ minDistance?: number; /** Maximum camera distance when zooming. */ maxDistance?: number; /** Show a faint wireframe overlay sphere. */ showWireframe?: boolean; /** Wireframe overlay color. */ wireframeColor?: string; /** Ambient light intensity. */ ambientIntensity?: number; /** Directional key light intensity (the blue fill uses 30% of it). */ pointLightIntensity?: number; /** Canvas background color (null keeps it transparent). */ backgroundColor?: string | null; /** Additional classes for the root element. */ class?: string; } const { markers = [], radius = 2, globeColor = '#1a1a2e', textureUrl = 'https://unpkg.com/three-globe@2.31.0/example/img/earth-blue-marble.jpg', bumpMapUrl = 'https://unpkg.com/three-globe@2.31.0/example/img/earth-topology.png', showAtmosphere = false, atmosphereColor = '#4da6ff', atmosphereIntensity = 0.5, atmosphereBlur = 2, bumpScale = 1, autoRotateSpeed = 0.3, enableZoom = false, enablePan = false, minDistance = 5, maxDistance = 15, showWireframe = false, wireframeColor = '#4a9eff', ambientIntensity = 0.6, pointLightIntensity = 1.5, backgroundColor = null, class: className, } = Astro.props; ---

{ markers.map((marker) => ( )) }

Loading globe...

Installation

Install dependencies

Add these files

Configuration

Use it