4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2127,"use client"; import { useEffect, useRef, useState } from "react"; import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three"; import ThreeGlobe from "three-globe"; import { useThree, Canvas, extend } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import countries from "@/data/globe.json"; declare module "@react-three/fiber" { interface ThreeElements { threeGlobe: ThreeElements["mesh"] & { new (): ThreeGlobe; }; } } extend({ ThreeGlobe: ThreeGlobe }); const RING_PROPAGATION_SPEED = 3; const aspect = 1.2; const cameraZ = 300; type Position = { order: number; startLat: number; startLng: number; endLat: number; endLng: number; arcAlt: number; color: string; }; export type GlobeConfig = { pointSize?: number; globeColor?: string; showAtmosphere?: boolean; atmosphereColor?: string; atmosphereAltitude?: number; emissive?: string; emissiveIntensity?: number; shininess?: number; polygonColor?: string; ambientLight?: string; directionalLeftLight?: string; directionalTopLight?: string; pointLight?: string; arcTime?: number; arcLength?: number; rings?: number; maxRings?: number; initialPosition?: { lat: number; lng: number; }; autoRotate?: boolean; autoRotateSpeed?: number; }; interface WorldProps { globeConfig: GlobeConfig; data: Position[]; } let numbersOfRings = [0]; export function Globe({ globeConfig, data }: WorldProps) { const globeRef = useRef(null); const groupRef = useRef(); const [isInitialized, setIsInitialized] = useState(false); const defaultProps = { pointSize: 1, atmosphereColor: "#ffffff", showAtmosphere: true, atmosphereAltitude: 0.1, polygonColor: "rgba(255,255,255,0.7)", globeColor: "#1d072e", emissive: "#000000", emissiveIntensity: 0.1, shininess: 0.9, arcTime: 2000, arcLength: 0.9, rings: 1, maxRings: 3, ...globeConfig, }; // Initialize globe only once useEffect(() => { if (!globeRef.current && groupRef.current) { globeRef.current = new ThreeGlobe(); (groupRef.current as any).add(globeRef.current); setIsInitialized(true); } }, []); // Build material when globe is initialized or when relevant props change useEffect(() => { if (!globeRef.current || !isInitialized) return; const globeMaterial = globeRef.current.globeMaterial() as unknown as { color: Color; emissive: Color; emissiveIntensity: number; shininess: number; }; globeMaterial.color = new Color(globeConfig.globeColor); globeMaterial.emissive = new Color(globeConfig.emissive); globeMaterial.emissiveIntensity = globeConfig.emissiveIntensity || 0.1; globeMaterial.shininess = globeConfig.shininess || 0.9; }, [ isInitialized, globeConfig.globeColor, globeConfig.emissive, globeConfig.emissiveIntensity, globeConfig.shininess, ]); // Build data when globe is initialized or when data changes useEffect(() => { if (!globeRef.current || !isInitialized || !data) return; const arcs = data; let points = []; for (let i = 0; i < arcs.length; i++) { const arc = arcs[i]; const rgb = hexToRgb(arc.color) as { r: number; g: number; b: number }; points.push({ size: defaultProps.pointSize, order: arc.order, color: arc.color, lat: arc.startLat, lng: arc.startLng, }); points.push({ size: defaultProps.pointSize, order: arc.order, color: arc.color, lat: arc.endLat, lng: arc.endLng, }); } // remove duplicates for same lat and lng const filteredPoints = points.filter( (v, i, a) => a.findIndex((v2) => ["lat", "lng"].every( (k) => v2[k as "lat" | "lng"] === v[k as "lat" | "lng"], ), ) === i, ); globeRef.current .hexPolygonsData(countries.features) .hexPolygonResolution(3) .hexPolygonMargin(0.7) .showAtmosphere(defaultProps.showAtmosphere) .atmosphereColor(defaultProps.atmosphereColor) .atmosphereAltitude(defaultProps.atmosphereAltitude) .hexPolygonColor(() => defaultProps.polygonColor); globeRef.current .arcsData(data) .arcStartLat((d) => (d as { startLat: number }).startLat * 1) .arcStartLng((d) => (d as { startLng: number }).startLng * 1) .arcEndLat((d) => (d as { endLat: number }).endLat * 1) .arcEndLng((d) => (d as { endLng: number }).endLng * 1) .arcColor((e: any) => (e as { color: string }).color) .arcAltitude((e) => (e as { arcAlt: number }).arcAlt * 1) .arcStroke(() => [0.32, 0.28, 0.3][Math.round(Math.random() * 2)]) .arcDashLength(defaultProps.arcLength) .arcDashInitialGap((e) => (e as { order: number }).order * 1) .arcDashGap(15) .arcDashAnimateTime(() => defaultProps.arcTime); globeRef.current .pointsData(filteredPoints) .pointColor((e) => (e as { color: string }).color) .pointsMerge(true) .pointAltitude(0.0) .pointRadius(2); globeRef.current .ringsData([]) .ringColor(() => defaultProps.polygonColor) .ringMaxRadius(defaultProps.maxRings) .ringPropagationSpeed(RING_PROPAGATION_SPEED) .ringRepeatPeriod( (defaultProps.arcTime * defaultProps.arcLength) / defaultProps.rings, ); }, [ isInitialized, data, defaultProps.pointSize, defaultProps.showAtmosphere, defaultProps.atmosphereColor, defaultProps.atmosphereAltitude, defaultProps.polygonColor, defaultProps.arcLength, defaultProps.arcTime, defaultProps.rings, defaultProps.maxRings, ]); // Handle rings animation with cleanup useEffect(() => { if (!globeRef.current || !isInitialized || !data) return; const interval = setInterval(() => { if (!globeRef.current) return; const newNumbersOfRings = genRandomNumbers( 0, data.length, Math.floor((data.length * 4) / 5), ); const ringsData = data .filter((d, i) => newNumbersOfRings.includes(i)) .map((d) => ({ lat: d.startLat, lng: d.startLng, color: d.color, })); globeRef.current.ringsData(ringsData); }, 2000); return () => { clearInterval(interval); }; }, [isInitialized, data]); return ; } export function WebGLRendererConfig() { const { gl, size } = useThree(); useEffect(() => { gl.setPixelRatio(window.devicePixelRatio); gl.setSize(size.width, size.height); gl.setClearColor(0xffaaff, 0); }, []); return null; } export function World(props: WorldProps) { const { globeConfig } = props; const scene = new Scene(); scene.fog = new Fog(0xffffff, 400, 2000); return (

); } export function hexToRgb(hex: string) { var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : null; } export function genRandomNumbers(min: number, max: number, count: number) { const arr = []; while (arr.length < count) { const r = Math.floor(Math.random() * (max - min)) + min; if (arr.indexOf(r) === -1) arr.push(r); } return arr; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}],["$","li","three-globe",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three-globe","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three-globe"}]]}]}],["$","li","@react-three/fiber@alpha",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber@alpha"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei"}]]}]}]]}],["$","$L4f",null,{"namespace":"@aceternity","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/ui/globe.tsx","content":"$51","type":"registry:ui","target":"components/ui/globe.tsx"}],"className":"h-[70svh] min-h-80"}]]}]