"use client"; import { useRef, useEffect, useState } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Sphere, Line } from "@react-three/drei"; import * as THREE from "three"; import { FloatingDots } from "@/components/ui/floating-dots"; interface CountryFeature { type: "Feature"; geometry: { type: "MultiPolygon" | "Polygon"; coordinates: number[][][][]; }; properties: { NAME: string; }; } function GlobeCountries() { const [countries, setCountries] = useState([]); const groupRef = useRef(null); const globeRadius = 1.005; useEffect(() => { fetch("/countries-110m.geojson") .then((response) => response.json()) .then((data) => setCountries(data.features)); }, []); const convertCoordinates = (lon: number, lat: number) => { const phi = THREE.MathUtils.degToRad(lon); const theta = THREE.MathUtils.degToRad(90 - lat); return new THREE.Vector3( globeRadius * Math.sin(theta) * Math.cos(phi), globeRadius * Math.sin(theta) * Math.sin(phi), globeRadius * Math.cos(theta) ); }; return ( {countries.map((country, i) => { // Handle both Polygon and MultiPolygon types const coordinates = country.geometry.type === "MultiPolygon" ? country.geometry.coordinates : [country.geometry.coordinates]; return coordinates.flatMap((polygon, pi) => polygon.flatMap((ring, ri) => { // Ensure we're working with position arrays const positions = ring.map((coord) => { // Handle both [lon, lat] and [lon, lat, height] formats const [lon, lat] = coord as [number, number]; return convertCoordinates(lon, lat); }); return ( ); }) ); })} ); } function Globe() { const groupRef = useRef(null); const indiaLon = 78.9629; // India's longitude const indiaLat = 20.5937; // India's latitude useFrame(({ clock }) => { if (groupRef.current) { groupRef.current.rotation.y = THREE.MathUtils.degToRad(-indiaLon) + clock.getElapsedTime() * 0.05; } }); return ( {/* Main globe sphere */} {/* Country borders */} {/* Equator positioned correctly */} ); } export function GlobeHero() { return (

); }

3d background

3d background

Install Dependencies