globe

1"use client";
2import { useEffect, useRef, useState } from "react";
3import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three";
4import ThreeGlobe from "three-globe";
5import { useThree, Canvas, extend } from "@react-three/fiber";
6import { OrbitControls } from "@react-three/drei";
7import countries from "@/data/globe.json";
8declare module "@react-three/fiber" {
9  interface ThreeElements {
10    threeGlobe: ThreeElements["mesh"] & {
11      new (): ThreeGlobe;
12    };
13  }
14}
15 
16extend({ ThreeGlobe: ThreeGlobe });
17 
18const RING_PROPAGATION_SPEED = 3;
19const aspect = 1.2;
20const cameraZ = 300;
21 
22type Position = {
23  order: number;
24  startLat: number;
25  startLng: number;
26  endLat: number;
27  endLng: number;
28  arcAlt: number;
29  color: string;
30};
31 
32export type GlobeConfig = {
33  pointSize?: number;
34  globeColor?: string;
35  showAtmosphere?: boolean;
36  atmosphereColor?: string;
37  atmosphereAltitude?: number;
38  emissive?: string;
39  emissiveIntensity?: number;
40  shininess?: number;
41  polygonColor?: string;
42  ambientLight?: string;
43  directionalLeftLight?: string;
44  directionalTopLight?: string;
45  pointLight?: string;
46  arcTime?: number;
47  arcLength?: number;
48  rings?: number;
49  maxRings?: number;
50  initialPosition?: {
51    lat: number;
52    lng: number;
53  };
54  autoRotate?: boolean;
55  autoRotateSpeed?: number;
56};
57 
58interface WorldProps {
59  globeConfig: GlobeConfig;
60  data: Position[];
61}
62 
63let numbersOfRings = [0];
64 
65export function Globe({ globeConfig, data }: WorldProps) {
66  const globeRef = useRef<ThreeGlobe | null>(null);
67  const groupRef = useRef();
68  const [isInitialized, setIsInitialized] = useState(false);
69 
70  const defaultProps = {
71    pointSize: 1,
72    atmosphereColor: "#ffffff",
73    showAtmosphere: true,
74    atmosphereAltitude: 0.1,
75    polygonColor: "rgba(255,255,255,0.7)",
76    globeColor: "#1d072e",
77    emissive: "#000000",
78    emissiveIntensity: 0.1,
79    shininess: 0.9,
80    arcTime: 2000,
81    arcLength: 0.9,
82    rings: 1,
83    maxRings: 3,
84    ...globeConfig,
85  };
86 
87  // Initialize globe only once
88  useEffect(() => {
89    if (!globeRef.current && groupRef.current) {
90      globeRef.current = new ThreeGlobe();
91      (groupRef.current as any).add(globeRef.current);
92      setIsInitialized(true);
93    }
94  }, []);
95 
96  // Build material when globe is initialized or when relevant props change
97  useEffect(() => {
98    if (!globeRef.current || !isInitialized) return;
99 
100    const globeMaterial = globeRef.current.globeMaterial() as unknown as {
101      color: Color;
102      emissive: Color;
103// … truncated