3d Globe

1"use client";
2import React, { useRef, useMemo, useState, useCallback, Suspense } from "react";
3import { Canvas, useFrame, useThree } from "@react-three/fiber";
4import { OrbitControls, Html, useTexture } from "@react-three/drei";
5import * as THREE from "three";
6import { cn } from "@/lib/utils";
7 
8// ============================================================================
9// Types
10// ============================================================================
11 
12export interface GlobeMarker {
13  lat: number;
14  lng: number;
15  src: string;
16  label?: string;
17  size?: number;
18}
19 
20export interface Globe3DConfig {
21  /** Globe radius */
22  radius?: number;
23  /** Globe base color (used as fallback or tint) */
24  globeColor?: string;
25  /** URL to the Earth texture map */
26  textureUrl?: string;
27  /** URL to the bump/elevation map for terrain */
28  bumpMapUrl?: string;
29  /** Whether to show atmosphere glow */
30  showAtmosphere?: boolean;
31  /** Atmosphere color */
32  atmosphereColor?: string;
33  /** Atmosphere intensity */
34  atmosphereIntensity?: number;
35  /** Atmosphere blur/softness (higher = more diffuse, default 3) */
36  atmosphereBlur?: number;
37  /** Terrain bump scale (0 = flat, higher = more pronounced) */
38  bumpScale?: number;
39  /** Auto rotate speed (0 = disabled) */
40  autoRotateSpeed?: number;
41  /** Enable zoom */
42  enableZoom?: boolean;
43  /** Enable pan */
44  enablePan?: boolean;
45  /** Min zoom distance */
46  minDistance?: number;
47  /** Max zoom distance */
48  maxDistance?: number;
49  /** Initial rotation */
50  initialRotation?: { x: number; y: number };
51  /** Marker default size */
52  markerSize?: number;
53  /** Show wireframe overlay */
54  showWireframe?: boolean;
55  /** Wireframe color */
56  wireframeColor?: string;
57  /** Ambient light intensity */
58  ambientIntensity?: number;
59  /** Point light intensity */
60  pointLightIntensity?: number;
61  /** Background color (null for transparent) */
62  backgroundColor?: string | null;
63}
64 
65interface Globe3DProps {
66  /** Array of markers to display on the globe */
67  markers?: GlobeMarker[];
68  /** Globe configuration */
69  config?: Globe3DConfig;
70  /** Additional CSS classes */
71  className?: string;
72  /** Callback when a marker is clicked */
73  onMarkerClick?: (marker: GlobeMarker) => void;
74  /** Callback when a marker is hovered */
75  onMarkerHover?: (marker: GlobeMarker | null) => void;
76}
77 
78// ============================================================================
79// Constants - Earth Texture URLs (NASA Blue Marble)
80// … truncated