[V0_FILE]json:file="app/countries.json" isTerminated="true" isMerged="true" { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "Afghanistan" }, "geometry": { "type": "Polygon", "coordinates": [ [ [61.210817, 35.650072], [62.230651, 35.270664], [62.984662, 35.404041], [63.193538, 35.857166], [63.982896, 36.007957], [64.546479, 36.312073], [64.746105, 37.111818], [65.588948, 37.305217], [65.745631, 37.661164], [66.217385, 37.39379], [66.518607, 37.362784], [67.075782, 37.356144], [67.83, 37.144994], [68.135562, 37.023115], [68.859446, 37.344336], [69.196273, 37.151144], [69.518785, 37.608997], [70.116578, 37.588223], [70.270574, 37.735165], [70.376304, 38.138396], [70.806821, 38.486282], [71.348131, 38.258905], [71.239404, 37.953265], [71.541918, 37.905774], [71.448693, 37.065645], [71.844638, 36.738171], [72.193041, 36.948288], [72.636889, 37.047558], [73.260056, 37.495257], [73.948696, 37.421566], [74.980002, 37.41999], [75.158028, 37.133031], [74.575893, 37.020841], [74.067552, 36.836176], [72.920025, 36.720007], [71.846292, 36.509942], [71.262348, 36.074388], [71.498768, 35.650563], [71.613076, 35.153203], [71.115019, 34.733126], [71.156773, 34.348911], [70.881803, 33.988856], [69.930543, 34.02012], [70.323594, 33.358533], [69.687147, 33.105499], [69.262522, 32.501944], [69.317764, 31.901412], [68.926677, 31.620189], [68.556932, 31.71331], [67.792689, 31.58293], [67.683394, 31.303154], [66.938891, 31.304911], [66.381458, 30.738899], [66.346473, 29.887943], [65.046862, 29.472181], [64.350419, 29.560031], [64.148002, 29.340819], [63.550261, 29.468331], [62.549857, 29.318572], [60.874248, 29.829239], [61.781222, 30.73585], [61.699314, 31.379506], [60.941945, 31.548075], [60.863655, 32.18292], [60.536078, 32.981269], [60.9637, 33.528832], [60.52843, 33.676446], [60.803193, 34.404102], [61.210817, 35.650072] ] ] } }, { "type": "Feature", "properties": { "name": "Albania" }, "geometry": { "type": "Polygon", "coordinates": [ [ [20.590247, 41.855404], [20.463175, 41.515089], [20.605182, 41.086226], [21.02004, 40.842727], [20.99999, 40.580004], [20.674997, 40.435], [20.615, 40.110007], [20.150016, 39.624998], [19.98, 39.694993], [19.960002, 39.915006], [19.406082, 40.250773], [19.319059, 40.72723], [19.40355, 41.409566], [19.540027, 41.719986], [19.371769, 41.877548], [19.304486, 42.195745], [19.738051, 42.688247], [19.801613, 42.500093], [20.0707, 42.58863], [20.283755, 42.32026], [20.52295, 42.21787], [20.590247, 41.855404] ] ] } }, { "type": "Feature", "properties": { "name": "United Kingdom" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [-5.661949, 54.554603], [-6.197885, 53.867565], [-6.95373, 54.073702], [-7.572168, 54.059956], [-7.366031, 54.595841], [-7.572168, 55.131622], [-6.733847, 55.17286], [-5.661949, 54.554603] ] ], [ [ [-3.005005, 58.635], [-4.073828, 57.553025], [-3.055002, 57.690019], [-1.959281, 57.6848], [-2.219988, 56.870017], [-3.119003, 55.973793], [-2.085009, 55.909998], [-2.005676, 55.804903], [-1.114991, 54.624986], [-0.430485, 54.464376], [0.184981, 53.325014], [0.469977, 52.929999], [1.681531, 52.73952], [1.559988, 52.099998], [1.050562, 51.806761], [1.449865, 51.289428], [0.550334, 50.765739], [-0.787517, 50.774989], [-2.489998, 50.500019], [-2.956274, 50.69688], [-3.617448, 50.228356], [-4.542508, 50.341837], [-5.245023, 49.96], [-5.776567, 50.159678], [-4.30999, 51.210001], [-3.414851, 51.426009], [-3.422719, 51.426848], [-4.984367, 51.593466], [-5.267296, 51.9914], [-4.222347, 52.301356], [-4.770013, 52.840005], [-4.579999, 53.495004], [-3.093831, 53.404547], [-3.09208, 53.404441], [-2.945009, 53.985], [-3.614701, 54.600937], [-3.630005, 54.615013], [-4.844169, 54.790971], [-5.082527, 55.061601], [-4.719112, 55.508473], [-5.047981, 55.783986], [-5.586398, 55.311146], [-5.644999, 56.275015], [-6.149981, 56.78501], [-5.786825, 57.818848], [-5.009999, 58.630013], [-4.211495, 58.550845], [-3.005005, 58.635] ] ] ] } }, { "type": "Feature", "properties": { "name": "United States" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [-155.54211, 19.08348], [-155.68817, 18.91619], [-155.93665, 19.05939], [-155.90806, 19.33888], [-156.07347, 19.70294], [-156.02368, 19.81422], [-155.85008, 19.97729], [-155.91907, 20.17395], [-155.86108, 20.26721], [-155.78505, 20.2487], [-155.40214, 20.07975], [-155.22452, 19.99302], [-155.06226, 19.8591], [-154.80741, 19.50871], [-154.83147, 19.45328], [-155.22217, 19.23972], [-155.54211, 19.08348] ] ], [ [ [-156.07926, 20.64397], [-156.41445, 20.57241], [-156.58673, 20.783], [-156.70167, 20.8643], [-156.71055, 20.92676], [-156.61258, 21.01249], [-156.25711, 20.91745], [-155.99566, 20.76404], [-156.07926, 20.64397] ] ], [ [ [-156.75824, 21.17684], [-156.78933, 21.06873], [-157.32521, 21.09777], [-157.25027, 21.21958], [-156.75824, 21.17684] ] ], [ [ [-157.65283, 21.32217], [-157.70703, 21.26442], [-157.7786, 21.27729], [-158.12667, 21.31244], [-158.2538, 21.53919], [-158.29265, 21.57912], [-158.0252, 21.71696], [-157.94161, 21.65272], [-157.65283, 21.32217] ] ], [ [ [-159.34512, 21.982], [-159.46372, 21.88299], [-159.80051, 22.06533], [-159.74877, 22.1382], [-159.5962, 22.23618], [-159.36569, 22.21494], [-159.34512, 21.982] ] ], [ [ [-94.81758, 49.38905], [-94.64, 48.84], [-94.32914, 48.67074], [-93.63087, 48.60926], [-92.61, 48.45], [-91.64, 48.14], [-90.83, 48.27], [-89.6, 48.01], [-89.272917, 48.019808], [-88.378114, 48.302918], [-87.439793, 47.94], [-86.461991, 47.553338], [-85.652363, 47.220219], [-84.87608, 46.900083], [-84.779238, 46.637102], [-84.543749, 46.538684], [-84.6049, 46.4396], [-84.3367, 46.40877], [-84.14212, 46.512226], [-84.091851, 46.275419], [-83.890765, 46.116927], [-83.616131, 46.116927], [-83.469551, 45.994686], [-83.592851, 45.816894], [-82.550925, 45.347517], [-82.337763, 44.44], [-82.137642, 43.571088], [-82.43, 42.98], [-82.9, 42.43], [-83.12, 42.08], [-83.142, 41.975681], [-83.02981, 41.832796], [-82.690089, 41.675105], [-82.439278, 41.675105], [-81.277747, 42.209026], [-80.247448, 42.3662], [-78.939362, 42.863611], [-78.92, 42.965], [-79.01, 43.27], [-79.171674, 43.466339], [-78.72028, 43.625089], [-77.737885, 43.629056], [-76.820034, 43.628784], [-76.5, 44.018459], [-76.375, 44.09631], [-75.31821, 44.81645], [-74.867, 45.00048], [-73.34783, 45.00738], [-71.50506, 45.0082], [-71.405, 45.255], [-71.08482, 45.30524], [-70.66, 45.46], [-70.305, 45.915], [-69.99997, 46.69307], [-69.237216, 47.447781], [-68.905, 47.185], [-68.23444, 47.35486], [-67.79046, 47.06636], [-67.79134, 45.70281], [-67.13741, 45.13753], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.645476, 43.090238], [-70.81489, 42.8653], [-70.825, 42.335], [-70.495, 41.805], [-70.08, 41.78], [-70.185, 42.145], [-69.88497, 41.92283], [-69.96503, 41.63717], [-70.64, 41.475], [-71.12039, 41.49445], [-71.86, 41.32], [-72.295, 41.27], [-72.87643, 41.22065], [-73.71, 40.931102], [-72.24126, 41.11948], [-71.945, 40.93], [-73.345, 40.63], [-73.982, 40.628], [-73.952325, 40.75075], [-74.25671, 40.47351], [-73.96244, 40.42763], [-74.17838, 39.70926], [-74.90604, 38.93954], [-74.98041, 39.1964], [-75.20002, 39.24845], [-75.52805, 39.4985], [-75.32, 38.96], [-75.071835, 38.782032], [-75.05673, 38.40412], [-75.37747, 38.01551], [-75.94023, 37.21689], [-76.03127, 37.2566], [-75.72205, 37.93705], [-76.23287, 38.319215], [-76.35, 39.15], [-76.542725, 38.717615], [-76.32933, 38.08326], [-76.989998, 38.239992], [-76.30162, 37.917945], [-76.25874, 36.9664], [-75.9718, 36.89726], [-75.86804, 36.55125], [-75.72749, 35.55074], [-76.36318, 34.80854], [-77.397635, 34.51201], [-78.05496, 33.92547], [-78.55435, 33.86133], [-79.06067, 33.49395], [-79.20357, 33.15839], [-80.301325, 32.509355], [-80.86498, 32.0333], [-81.33629, 31.44049], [-81.49042, 30.72999], [-81.31371, 30.03552], [-80.98, 29.18], [-80.535585, 28.47213], [-80.53, 28.04], [-80.056539, 26.88], [-80.088015, 26.205765], [-80.13156, 25.816775], [-80.38103, 25.20616], [-80.68, 25.08], [-81.17213, 25.20126], [-81.33, 25.64], [-81.71, 25.87], [-82.24, 26.73], [-82.70515, 27.49504], [-82.85526, 27.88624], [-82.65, 28.55], [-82.93, 29.1], [-83.70959, 29.93656], [-84.1, 30.09], [-85.10882, 29.63615], [-85.28784, 29.68612], [-85.7731, 30.15261], [-86.4, 30.4], [-87.53036, 30.27433], [-88.41782, 30.3849], [-89.18049, 30.31598], [-89.593831, 30.159994], [-89.413735, 29.89419], [-89.43, 29.48864], [-89.21767, 29.29108], [-89.40823, 29.15961], [-89.77928, 29.30714], [-90.15463, 29.11743], [-90.880225, 29.148535], [-91.626785, 29.677], [-92.49906, 29.5523], [-93.22637, 29.78375], [-93.84842, 29.71363], [-94.69, 29.48], [-95.60026, 28.73863], [-96.59404, 28.30748], [-97.14, 27.83], [-97.37, 27.38], [-97.38, 26.69], [-97.33, 26.21], [-97.14, 25.87], [-97.53, 25.84], [-98.24, 26.06], [-99.02, 26.37], [-99.3, 26.84], [-99.52, 27.54], [-100.11, 28.11], [-100.45584, 28.69612], [-100.9576, 29.38071], [-101.6624, 29.7793], [-102.48, 29.76], [-103.11, 28.97], [-103.94, 29.27], [-104.45697, 29.57196], [-104.70575, 30.12173], [-105.03737, 30.64402], [-105.63159, 31.08383], [-106.1429, 31.39995], [-106.50759, 31.75452], [-108.24, 31.754854], [-108.24194, 31.34222], [-109.035, 31.34194], [-111.02361, 31.33472], [-113.30498, 32.03914], [-114.815, 32.52528], [-114.72139, 32.72083], [-115.99135, 32.61239], [-117.12776, 32.53534], [-117.295938, 33.046225], [-117.944, 33.621236], [-118.410602, 33.740909], [-118.519895, 34.027782], [-119.081, 34.078], [-119.438841, 34.348477], [-120.36778, 34.44711], [-120.62286, 34.60855], [-120.74433, 35.15686], [-121.71457, 36.16153], [-122. [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" export default function WorldMap() { const containerRef = useRef(null) const controlsRef = useRef(null) const [isRotating, setIsRotating] = useState(true) const [rotationSpeed, setRotationSpeed] = useState(0.0005) const [showConnections, setShowConnections] = useState(true) const [nodeCount, setNodeCount] = useState(25) const [showLabels, setShowLabels] = useState(false) const [pointSize, setPointSize] = useState(0.5) const [glowIntensity, setGlowIntensity] = useState(0.8) const [showRegions, setShowRegions] = useState(true) const [regionOpacity, setRegionOpacity] = useState(0.3) const [selectedRegion, setSelectedRegion] = useState(null) useEffect(() => { if (!containerRef.current) return // Scene setup const scene = new THREE.Scene() scene.background = new THREE.Color(0x0a0a1e) // Dark blue/purple background // Camera setup const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.z = 200 // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) containerRef.current.appendChild(renderer.domElement) // Raycaster for click interactions const raycaster = new THREE.Raycaster() const mouse = new THREE.Vector2() // Controls const controls = new OrbitControls(camera, renderer.domElement) controlsRef.current = controls controls.enableDamping = true controls.dampingFactor = 0.05 controls.rotateSpeed = 0.5 controls.minDistance = 120 controls.maxDistance = 500 controls.enablePan = false // Add event listeners to pause rotation when user interacts let userInteracting = false controls.addEventListener("start", () => { userInteracting = true }) controls.addEventListener("end", () => { userInteracting = false }) // Create main container for all globe elements const globeContainer = new THREE.Group() scene.add(globeContainer) // Create base sphere with subtle glow const baseGeometry = new THREE.SphereGeometry(98, 64, 64) const baseMaterial = new THREE.MeshBasicMaterial({ color: 0x0a0a2a, transparent: true, opacity: 0.1, }) const baseSphere = new THREE.Mesh(baseGeometry, baseMaterial) globeContainer.add(baseSphere) // Add outer glow const glowGeometry = new THREE.SphereGeometry(99, 64, 64) const glowMaterial = new THREE.ShaderMaterial({ uniforms: { c: { value: 0.2 }, p: { value: 1.0 }, glowColor: { value: new THREE.Color(0x00a2ff) }, }, vertexShader: ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 glowColor; uniform float c; uniform float p; varying vec3 vNormal; void main() { float intensity = pow(c - dot(vNormal, vec3(0.0, 0.0, 1.0)), p); gl_FragColor = vec4(glowColor, intensity * ${glowIntensity}); } `, side: THREE.BackSide, blending: THREE.AdditiveBlending, transparent: true, }) const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial) globeContainer.add(glowMesh) // Create grid lines for the globe const gridGroup = new THREE.Group() globeContainer.add(gridGroup) // Create latitude lines for (let lat = -80; lat <= 80; lat += 20) { const points = [] for (let lng = -180; lng <= 180; lng += 5) { const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180) const x = -100 * Math.sin(phi) * Math.cos(theta) const y = 100 * Math.cos(phi) const z = 100 * Math.sin(phi) * Math.sin(theta) points.push(new THREE.Vector3(x, y, z)) } const geometry = new THREE.BufferGeometry().setFromPoints(points) const material = new THREE.LineBasicMaterial({ color: 0x00a2ff, transparent: true, opacity: 0.1, }) const line = new THREE.Line(geometry, material) gridGroup.add(line) } // Create longitude lines for (let lng = -180; lng < 180; lng += 20) { const points = [] for (let lat = -90; lat <= 90; lat += 5) { const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180) const x = -100 * Math.sin(phi) * Math.cos(theta) const y = 100 * Math.cos(phi) const z = 100 * Math.sin(phi) * Math.sin(theta) points.push(new THREE.Vector3(x, y, z)) } const geometry = new THREE.BufferGeometry().setFromPoints(points) const material = new THREE.LineBasicMaterial({ color: 0x00a2ff, transparent: true, opacity: 0.1, }) const line = new THREE.Line(geometry, material) gridGroup.add(line) } // Create region-based map inside the globe const regionsGroup = new THREE.Group() globeContainer.add(regionsGroup) // Define regions with their boundaries and colors const regions = [ { name: "North America", color: 0x0088ff, boundaries: [ // West Coast [-125, 30], [-125, 49], [-123, 60], [-115, 70], // North Coast [-100, 75], [-80, 75], [-60, 75], // East Coast [-50, 60], [-60, 50], [-70, 40], [-80, 25], // South [-97, 25], [-100, 15], [-110, 20], [-120, 25], ], }, { name: "South America", color: 0x00aaff, boundaries: [ [-80, 12], [-70, 12], [-50, 5], [-40, -10], [-40, -20], [-50, -35], [-55, -55], [-70, -55], [-75, -40], [-80, -20], [-85, 0], [-80, 12], ], }, { name: "Europe", color: 0x00ccff, boundaries: [ [-10, 35], [0, 40], [10, 45], [20, 40], [30, 45], [40, 50], [30, 60], [20, 70], [10, 75], [-10, 70], [-20, 60], [-10, 50], [-10, 35], ], }, { name: "Africa", color: 0x00ddff, boundaries: [ [-15, 35], [0, 35], [20, 30], [40, 30], [50, 15], [45, 0], [40, -15], [30, -35], [15, -35], [0, -30], [-10, -20], [-15, 0], [-15, 20], [-15, 35], ], }, { name: "Asia", color: 0x00ffff, boundaries: [ [30, 40], [40, 35], [60, 35], [80, 50], [100, 60], [120, 65], [140, 55], [150, 45], [140, 35], [130, 25], [120, 15], [100, 5], [80, 5], [60, 15], [40, 25], [30, 40], ], }, { name: "Southeast Asia", color: 0x66ffff, boundaries: [ [95, 20], [105, 20], [120, 15], [130, 5], [120, -5], [110, -10], [100, -5], [95, 5], [95, 20], ], }, { name: "Australia", color: 0x99ffff, boundaries: [ [110, -10], [120, -15], [130, -15], [145, -20], [150, -30], [145, -40], [130, -40], [115, -35], [110, -25], [110, -10], ], }, { name: "Middle East", color: 0x33eeff, boundaries: [ [30, 40], [40, 40], [50, 35], [60, 30], [60, 20], [50, 15], [40, 15], [30, 25], [30, 40], ], }, ] // Create region meshes - simplified for better performance regions.forEach((region) => { // Convert region boundaries to 3D vectors const points = region.boundaries.map(([lng, lat]) => { const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180) const x = -97 * Math.sin(phi) * Math.cos(theta) const y = 97 * Math.cos(phi) const z = 97 * Math.sin(phi) * Math.sin(theta) return new THREE.Vector3(x, y, z) }) // Create a shape from the points const shape = new THREE.Shape() // Project 3D points to 2D for triangulation const center = new THREE.Vector3() points.forEach((p) => center.add(p)) center.divideScalar(points.length) const normal = center.clone().normalize() const tangent = new THREE.Vector3(1, 0, 0) if (Math.abs(normal.dot(tangent)) > 0.99) { tangent.set(0, 1, 0) } const binormal = new THREE.Vector3().crossVectors(normal, tangent).normalize() tangent.crossVectors(binormal, normal).normalize() const projected = points.map((p) => { const v = p.clone().sub(center) return new THREE.Vector2(v.dot(tangent), v.dot(binormal)) }) // Create shape from projected points shape.moveTo(projected[0].x, projected[0].y) for (let i = 1; i < projected.length; i++) { shape.lineTo(projected[i].x, projected[i].y) } shape.lineTo(projected[0].x, projected[0].y) // Create geometry from shape const geometry = new THREE.ShapeGeometry(shape) // Map vertices back to 3D const positionAttribute = geometry.getAttribute("position") for (let i = 0; i < positionAttribute.count; i++) { const x = positionAttribute.getX(i) const y = positionAttribute.getY(i) const z = 0 const worldPos = new THREE.Vector3(x, y, z) .applyMatrix3( new THREE.Matrix3().set( tangent.x, binormal.x, normal.x, tangent.y, binormal.y, normal.y, tangent.z, binormal.z, normal.z, ), ) .add(center) // Project to sphere surface worldPos.normalize().multiplyScalar(97) positionAttribute.setXYZ(i, worldPos.x, worldPos.y, worldPos.z) } geometry.computeVertexNormals() // Create material with glow effect const material = new THREE.MeshBasicMaterial({ color: region.color, transparent: true, opacity: regionOpacity, side: THREE.DoubleSide, }) const mesh = new THREE.Mesh(geometry, material) mesh.userData.region = region.name mesh.userData.color = region.color mesh.userData.isRegion = true mesh.userData.originalColor = region.color mesh.userData.originalOpacity = regionOpacity // Add wireframe outline const wireframe = new THREE.LineSegments( new THREE.WireframeGeometry(geometry), new THREE.LineBasicMaterial({ color: region.color, transparent: true, opacity: 0.8, }), ) mesh.add(wireframe) regionsGroup.add(mesh) }) // Toggle regions visibility regionsGroup.visible = showRegions // Create point cloud for continents const pointsGroup = new THREE.Group() globeContainer.add(pointsGroup) // Define continent data with density maps const continentData = [ { name: "North America", color: 0x00a2ff, points: generateContinentPoints([ [-130, 30, -60, 70, 0.3], // West Coast to East Coast, Southern US to Northern Canada [-100, 15, -80, 30, 0.2], // Mexico and Central America ]), }, { name: "South America", color: 0x00d2ff, points: generateContinentPoints([ [-80, -55, -35, 10, 0.25], // Main continent ]), }, { name: "Europe", color: 0x00c0ff, points: generateContinentPoints([ [-10, 35, 30, 70, 0.4], // Western to Eastern Europe ]), }, { name: "Africa", color: 0x00b0ff, points: generateContinentPoints([ [-20, -35, 50, 35, 0.25], // Main continent ]), }, { name: "Asia", color: 0x0090ff, points: generateContinentPoints([ [30, 0, 150, 70, 0.2], // Main continent [95, -10, 150, 0, 0.3], // Southeast Asia ]), }, { name: "Australia", color: 0x00e0ff, points: generateContinentPoints([ [110, -40, 155, -10, 0.3], // Main continent ]), }, ] // Function to generate points within a continent's bounds function generateContinentPoints(regions) { const points = [] regions.forEach(([minLng, minLat, maxLng, maxLat, density]) => { // Calculate number of points based on area and density const area = (maxLng - minLng) * (maxLat - minLat) const pointCount = Math.floor(area * density) for (let i = 0; i < pointCount; i++) { // Random position within region const lat = minLat + Math.random() * (maxLat - minLat) const lng = minLng + Math.random() * (maxLng - minLng) // Convert to 3D position const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180) const x = -100 * Math.sin(phi) * Math.cos(theta) const y = 100 * Math.cos(phi) const z = 100 * Math.sin(phi) * Math.sin(theta) points.push(new THREE.Vector3(x, y, z)) } }) return points } // Create point clouds for each continent continentData.forEach((continent) => { const geometry = new THREE.BufferGeometry().setFromPoints(continent.points) // Create shader material for glowing points const pointMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(continent.color) }, pointSize: { value: pointSize }, }, vertexShader: ` uniform float pointSize; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = pointSize * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 color; void main() { float dist = length(gl_PointCoord - vec2(0.5, 0.5)); if (dist > 0.5) discard; float intensity = 1.0 - (dist * 2.0); vec3 glow = color * intensity; gl_FragColor = vec4(glow, intensity); } `, transparent: true, blending: THREE.AdditiveBlending, }) const points = new THREE.Points(geometry, pointMaterial) pointsGroup.add(points) }) // Create network nodes and connections const networkGroup = new THREE.Group() globeContainer.add(networkGroup) // Define major cities/nodes const majorNodes = [ { name: "New York", lat: 40.7128, lng: -74.006, color: 0x00ffff }, { name: "Los Angeles", lat: 34.0522, lng: -118.2437, color: 0x00ffff }, { name: "Toronto", lat: 43.6532, lng: -79.3832, color: 0x00ffff }, { name: "Mexico City", lat: 19.4326, lng: -99.1332, color: 0x00ffff }, { name: "London", lat: 51.5074, lng: -0.1278, color: 0x00ffff }, { name: "Paris", lat: 48.8566, lng: 2.3522, color: 0x00ffff }, { name: "Berlin", lat: 52.52, lng: 13.405, color: 0x00ffff }, { name: "Moscow", lat: 55.7558, lng: 37.6173, color: 0x00ffff }, { name: "Beijing", lat: 39.9042, lng: 116.4074, color: 0x00ffff }, { name: "Tokyo", lat: 35.6762, lng: 139.6503, color: 0x00ffff }, { name: "Singapore", lat: 1.3521, lng: 103.8198, color: 0x00ffff }, { name: "Sydney", lat: -33.8688, lng: 151.2093, color: 0x00ffff }, { name: "Rio", lat: -22.9068, lng: -43.1729, color: 0x00ffff }, { name: "Cairo", lat: 30.0444, lng: 31.2357, color: 0x00ffff }, { name: "Lagos", lat: 6.5244, lng: 3.3792, color: 0x00ffff }, { name: "Mumbai", lat: 19.076, lng: 72.8777, color: 0x00ffff }, { name: "Bangkok", lat: 13.7563, lng: 100.5018, color: 0x00ffff }, { name: "Hong Kong", lat: 22.3193, lng: 114.1694, color: 0x00ffff }, { name: "Dubai", lat: 25.276987, lng: 55.296249, color: 0x00ffff }, { name: "San Francisco", lat: 37.7749, lng: -122.4194, color: 0x00ffff }, { name: "Chicago", lat: 41.8781, lng: -87.6298, color: 0x00ffff }, { name: "Madrid", lat: 40.4168, lng: -3.7038, color: 0x00ffff }, { name: "Rome", lat: 41.9028, lng: 12.4964, color: 0x00ffff }, { name: "Seoul", lat: 37.5665, lng: 126.978, color: 0x00ffff }, { name: "Shanghai", lat: 31.2304, lng: 121.4737, color: 0x00ffff }, { name: "São Paulo", lat: -23.5505, lng: -46.6333, color: 0x00ffff }, { name: "Buenos Aires", lat: -34.6037, lng: -58.3816, color: 0x00ffff }, { name: "Johannesburg", lat: -26.2041, lng: 28.0473, color: 0x00ffff }, { name: "Istanbul", lat: 41.0082, lng: 28.9784, color: 0x00ffff }, { name: "Delhi", lat: 28.7041, lng: 77.1025, color: 0x00ffff }, ] // Function to convert lat/lng to 3D position const latLngToVector3 = (lat, lng, radius = 100) => { const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180) const x = -radius * Math.sin(phi) * Math.cos(theta) const y = radius * Math.cos(phi) const z = radius * Math.sin(phi) * Math.sin(theta) return new THREE.Vector3(x, y, z) } // Create nodes const nodes = [] const createNodes = () => { // Clear previous nodes while (networkGroup.children.length > 0) { const child = networkGroup.children[0] networkGroup.remove(child) } nodes.length = 0 // Use major nodes as base const baseNodes = majorNodes.slice(0, nodeCount) // Create nodes at each location baseNodes.forEach((nodeInfo) => { const position = latLngToVector3(nodeInfo.lat, nodeInfo.lng) // Create node marker with glow effect const nodeGeometry = new THREE.SphereGeometry(0.8, 16, 16) const nodeMaterial = new THREE.MeshBasicMaterial({ color: nodeInfo.color, transparent: true, opacity: 0.8, }) const nodeMesh = new THREE.Mesh(nodeGeometry, nodeMaterial) nodeMesh.position.copy(position) nodeMesh.userData.isNode = true nodeMesh.userData.name = nodeInfo.name networkGroup.add(nodeMesh) // Create pulsing glow effect const pulseGeometry = new THREE.SphereGeometry(1, 16, 16) const pulseMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(nodeInfo.color) }, time: { value: 0 }, }, vertexShader: ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 color; uniform float time; varying vec3 vNormal; void main() { float intensity = pow(0.7 - dot(vNormal, vec3(0, 0, 1.0)), 1.0); float glow = (sin(time * 2.0) * 0.5 + 0.5) * intensity; gl_FragColor = vec4(color, glow * 0.8); } `, transparent: true, blending: THREE.AdditiveBlending, }) const pulse = new THREE.Mesh(pulseGeometry, pulseMaterial) pulse.position.copy(position) pulse.userData.pulse = true pulse.userData.material = pulseMaterial networkGroup.add(pulse) // Create text label for node (always create but only show when needed) const canvas = document.createElement("canvas") const context = canvas.getContext("2d") canvas.width = 300 canvas.height = 80 if (context) { // Create gradient background for better readability const gradient = context.createLinearGradient(0, 0, 0, canvas.height) gradient.addColorStop(0, "rgba(0, 10, 30, 0.85)") gradient.addColorStop(1, "rgba(0, 20, 40, 0.85)") context.fillStyle = gradient // Rounded rectangle background const cornerRadius = 8 context.beginPath() context.moveTo(cornerRadius, 0) context.lineTo(canvas.width - cornerRadius, 0) context.quadraticCurveTo(canvas.width, 0, canvas.width, cornerRadius) context.lineTo(canvas.width, canvas.height - cornerRadius) context.quadraticCurveTo(canvas.width, canvas.height, canvas.width - cornerRadius, canvas.height) context.lineTo(cornerRadius, canvas.height) context.quadraticCurveTo(0, canvas.height, 0, canvas.height - cornerRadius) context.lineTo(0, cornerRadius) context.quadraticCurveTo(0, 0, cornerRadius, 0) context.closePath() context.fill() // Add glowing border const borderGradient = context.createLinearGradient(0, 0, canvas.width, canvas.height) borderGradient.addColorStop(0, "rgba(0, 162, 255, 0.9)") borderGradient.addColorStop(1, "rgba(0, 230, 255, 0.7)") context.strokeStyle = borderGradient context.lineWidth = 2.5 context.stroke() // Text shadow for depth context.shadowColor = "rgba(0, 0, 0, 0.7)" context.shadowBlur = 4 context.shadowOffsetX = 0 context.shadowOffsetY = 1 // City name with improved font context.font = "bold 26px 'Segoe UI', Arial, sans-serif" context.fillStyle = "#ffffff" context.textAlign = "center" context.textBaseline = "middle" context.fillText(nodeInfo.name, canvas.width / 2, canvas.height / 2 - 2) // Reset shadow context.shadowBlur = 0 context.shadowOffsetX = 0 context.shadowOffsetY = 0 // Add cyan glow highlight context.font = "bold 26px 'Segoe UI', Arial, sans-serif" context.fillStyle = "rgba(0, 255, 255, 0.7)" context.fillText(nodeInfo.name, canvas.width / 2, canvas.height / 2) } const texture = new THREE.CanvasTexture(canvas) const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true, opacity: 0.9, }) const sprite = new THREE.Sprite(spriteMaterial) // Position the label with better offset from the node const nodeDirection = position.clone().normalize() const labelPosition = position.clone().add(nodeDirection.clone().multiplyScalar(10)) sprite.position.copy(labelPosition) // Scale the sprite for better visibility sprite.scale.set(15, 7.5, 1) // Store reference to the node sprite.userData.nodeInfo = nodeInfo sprite.userData.isLabel = true sprite.userData.isConnectedLabel = false // Will be set to true if connected sprite.visible = showLabels // Initially only visible if showLabels is true networkGroup.add(sprite) // Store node data nodes.push({ position, color: nodeInfo.color, name: nodeInfo.name, connections: [], mesh: nodeMesh, label: sprite, }) }) // Create connections between nodes if (showConnections) { createConnections() } } // Create connections between nodes const createConnections = () => { // Create connections - each node connects to 2-4 other nodes nodes.forEach((node, index) => { const numConnections = Math.floor(Math.random() * 3) + 2 // 2-4 connections // Find nodes to connect to for (let i = 0; i < numConnections; i++) { // Avoid connecting to self or duplicating connections let targetIndex let attempts = 0 do { targetIndex = Math.floor(Math.random() * nodes.length) attempts++ // Break after too many attempts to avoid infinite loop if (attempts > 20) break } while ( targetIndex === index || node.connections.includes(targetIndex) || nodes[targetIndex].connections.includes(index) ) if (attempts <= 20) { // Add connection node.connections.push(targetIndex) // Make labels visible for connected nodes node.label.userData.isConnectedLabel = true node.label.visible = true const targetNode = nodes[targetIndex] targetNode.label.userData.isConnectedLabel = true targetNode.label.visible = true const start = node.position const end = targetNode.position // Create curved path between nodes const distance = start.distanceTo(end) const midPoint = new THREE.Vector3().addVectors(start, end).multiplyScalar(0.5) const midPointHeight = distance * 0.2 midPoint.normalize().multiplyScalar(100 + midPointHeight) // Create curve const curve = new THREE.QuadraticBezierCurve3(start, midPoint, end) // Create points along curve for line const curvePoints = curve.getPoints(50) const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints) // Create glowing line material const curveMaterial = new THREE.LineBasicMaterial({ color: 0x00a2ff, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending, }) const curveLine = new THREE.Line(curveGeometry, curveMaterial) networkGroup.add(curveLine) // Add animated particles along the connection const particleCount = Math.floor(distance / 10) + 3 for (let j = 0; j < particleCount; j++) { const particleGeometry = new THREE.SphereGeometry(0.3, 8, 8) const particleMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0x00ffff) }, }, vertexShader: ` void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = 3.0; gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 color; void main() { float dist = length(gl_PointCoord - vec2(0.5, 0.5)); if (dist > 0.5) discard; float intensity = 1.0 - (dist * 2.0); gl_FragColor = vec4(color, intensity); } `, transparent: true, blending: THREE.AdditiveBlending, }) const particle = new THREE.Mesh(particleGeometry, particleMaterial) // Set initial position along curve const initialT = j / particleCount const initialPos = curve.getPoint(initialT) particle.position.copy(initialPos) // Add particle data particle.userData.curve = curve particle.userData.t = initialT particle.userData.speed = (Math.random() * 0.3 + 0.2) * 0.005 particle.userData.isParticle = true networkGroup.add(particle) } } } }) } // Create floating particles around the globe const particlesGroup = new THREE.Group() scene.add(particlesGroup) // Create ambient particles const ambientParticleCount = 500 const ambientParticlePositions = new Float32Array(ambientParticleCount * 3) const ambientParticleSizes = new Float32Array(ambientParticleCount) for (let i = 0; i < ambientParticleCount; i++) { // Random position in sphere around globe const radius = 100 + Math.random() * 50 const theta = Math.random() * Math.PI * 2 const phi = Math.random() * Math.PI const x = radius * Math.sin(phi) * Math.cos(theta) const y = radius * Math.sin(phi) * Math.sin(theta) const z = radius * Math.cos(phi) ambientParticlePositions[i * 3] = x ambientParticlePositions[i * 3 + 1] = y ambientParticlePositions[i * 3 + 2] = z // Random size ambientParticleSizes[i] = Math.random() * 1.5 } const ambientParticlesGeometry = new THREE.BufferGeometry() ambientParticlesGeometry.setAttribute("position", new THREE.BufferAttribute(ambientParticlePositions, 3)) ambientParticlesGeometry.setAttribute("size", new THREE.BufferAttribute(ambientParticleSizes, 1)) const ambientParticlesMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0x00a2ff) }, time: { value: 0 }, }, vertexShader: ` attribute float size; uniform float time; varying float vSize; void main() { vSize = size; // Subtle movement vec3 pos = position; pos.x += sin(time * 0.2 + position.z * 0.05) * 2.0; pos.y += cos(time * 0.1 + position.x * 0.05) * 2.0; pos.z += sin(time * 0.3 + position.y * 0.05) * 2.0; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 color; varying float vSize; void main() { float dist = length(gl_PointCoord - vec2(0.5, 0.5)); if (dist > 0.5) discard; float intensity = 1.0 - (dist * 2.0); vec3 glow = color * intensity; gl_FragColor = vec4(glow, intensity * 0.5); } `, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, }) const ambientParticles = new THREE.Points(ambientParticlesGeometry, ambientParticlesMaterial) particlesGroup.add(ambientParticles) // Initial creation of nodes and connections createNodes() // Handle window resize const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener("resize", handleResize) // Handle click for region selection const handleClick = (event) => { // Calculate normalized device coordinates mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1 // Update the raycaster raycaster.setFromCamera(mouse, camera) // Check for intersections with regions if (showRegions) { const intersects = raycaster.intersectObjects(regionsGroup.children, true) // If we have an intersection with a region if (intersects.length > 0) { let regionObject = null // Find the first intersected object that is a region for (let i = 0; i < intersects.length; i++) { const object = intersects[i].object if (object.userData.isRegion) { regionObject = object break } else if (object.parent && object.parent.userData.isRegion) { regionObject = object.parent break } } if (regionObject) { // Toggle selection of the region if (selectedRegion === regionObject.userData.region) { setSelectedRegion(null) } else { setSelectedRegion(regionObject.userData.region) } return } } // If clicked elsewhere, clear selection setSelectedRegion(null) } } window.addEventListener("click", handleClick) // Animation variables let time = 0 const clock = new THREE.Clock() // Animation loop const animate = () => { requestAnimationFrame(animate) const delta = clock.getDelta() time += delta // Update ambient particles ambientParticlesMaterial.uniforms.time.value = time // Auto-rotate the globe if not interacting if (isRotating && !userInteracting) { globeContainer.rotation.y += rotationSpeed } // Animate pulse effect for nodes networkGroup.children.forEach((child) => { if (child.userData.pulse && child.userData.material) { child.userData.material.uniforms.time.value = time } // Animate particles along connections if (child.userData.isParticle) { child.userData.t += child.userData.speed if (child.userData.t > 1) { child.userData.t = 0 } const newPos = child.userData.curve.getPoint(child.userData.t) child.position.copy(newPos) } // Make labels always face the camera if (child.userData.isLabel) { child.lookAt(camera.position) // Show labels based on settings if (showLabels) { child.visible = true } else { // Only show labels for connected nodes when showLabels is false child.visible = child.userData.isConnectedLabel } } }) // Update point size based on UI control pointsGroup.children.forEach((points) => { if (points.material.uniforms && points.material.uniforms.pointSize) { points.material.uniforms.pointSize.value = pointSize } }) // Update region highlighting based on selection regionsGroup.children.forEach((region) => { if (region.material && region.userData.isRegion) { if (region.userData.region === selectedRegion) { region.material.color.setHex(0xffffff) region.material.opacity = regionOpacity * 1.5 } else { region.material.color.setHex(region.userData.originalColor) region.material.opacity = regionOpacity } } }) controls.update() renderer.render(scene, camera) } animate() // Cleanup return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("click", handleClick) if (containerRef.current) { containerRef.current.removeChild(renderer.domElement) } } }, [ isRotating, rotationSpeed, showConnections, nodeCount, showLabels, pointSize, glowIntensity, showRegions, regionOpacity, selectedRegion, ]) return (

{/* Selected Region Info Panel */} {selectedRegion && (

{selectedRegion}

Click on regions to select

)} {/* Controls */}

Network Controls

setIsRotating(!isRotating)} className="w-4 h-4" /> Auto-rotate

setShowLabels(!showLabels)} className="w-4 h-4" /> Show All Labels

setShowRegions(!showRegions)} className="w-4 h-4" /> Show Regions

Rotation Speed setRotationSpeed(Number.parseFloat(e.target.value))} className="w-full" disabled={!isRotating} />

Number of Nodes: {nodeCount} setNodeCount(Number.parseInt(e.target.value))} className="w-full" />

Point Size setPointSize(Number.parseFloat(e.target.value))} className="w-full" />

Glow Intensity setGlowIntensity(Number.parseFloat(e.target.value))} className="w-full" />

Region Opacity setRegionOpacity(Number.parseFloat(e.target.value))} className="w-full" disabled={!showRegions} />

{/* Instructions */}

Drag to rotate • Scroll to zoom • Click regions to select

{/* Title */}

Global Network

Interactive data visualization

{/* Region Legend */} {showRegions && (

Regions

North America

South America

Europe

Africa

Asia

Southeast Asia

Australia

Middle East

)}

) }