globo 2 - AIF Asociación Internacional de Futbolistas

<!DOCTYPE html>
<html>
<head>
  <style> body { margin: 0; background: #000; } </style>
  <script src="https://unpkg.com"></script>
</head>

<body>
  <div id="globeViz"></div>

  <script type="module">
    import * as THREE from 'https://esm.sh';

    // 1. Datos de los 4 países
    const p1 = { name: 'España', lat: 40.46, lng: -3.74 };
    const p2 = { name: 'México', lat: 23.63, lng: -102.55 };
    const p3 = { name: 'Colombia', lat: 4.57, lng: -74.29 };
    const p4 = { name: 'Argentina', lat: -38.41, lng: -63.61 };

    const paises = [p1, p2, p3, p4];

    // 2. Definir los saltos (arcos) del balón entre ellos
    const saltosBalon = [
      { startLat: p1.lat, startLng: p1.lng, endLat: p2.lat, endLng: p2.lng },
      { startLat: p2.lat, startLng: p2.lng, endLat: p3.lat, endLng: p3.lng },
      { startLat: p3.lat, startLng: p3.lng, endLat: p4.lat, endLng: p4.lng },
      { startLat: p4.lat, startLng: p4.lng, endLat: p1.lat, endLng: p1.lng }
    ];

    const world = Globe()(document.getElementById('globeViz'))
      // Imagen del mundo oscura para resaltar el oro
      .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
      .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
      
      // Configuración de los puntos (países)
      .pointsData(paises)
      .pointColor(() => '#907d5f')
      .pointRadius(0.7)
      .pointAltitude(0.02)
      
      // Configuración del balón saltando (Arcos)
      .arcsData(saltosBalon)
      .arcColor(() => '#907d5f')
      .arcDashLength(0.5) // Tamaño del rastro/balón
      .arcDashGap(2)
      .arcDashAnimateTime(2000) // Velocidad del salto
      .arcAltitude(0.3) // Altura del salto
      .arcStroke(1.2)
      
      .showAtmosphere(true)
      .atmosphereColor('#907d5f')
      .atmosphereDaylightAlpha(0.1);

    // 3. Silueta dorada exterior
    const silhouetteGeom = new THREE.SphereGeometry(world.getGlobeRadius() * 1.015, 75, 75);
    const silhouetteMat = new THREE.MeshBasicMaterial({
      color: '#907d5f',
      side: THREE.BackSide,
      transparent: true,
      opacity: 0.25
    });
    world.scene().add(new THREE.Mesh(silhouetteGeom, silhouetteMat));

    // Rotación automática
    world.controls().autoRotate = true;
    world.controls().autoRotateSpeed = 0.6;
    world.controls().enableZoom = false; // Opcional: bloquea el zoom para que se vea fijo

  </script>
</body>
</html>
sdfadsafdsafgsa