Three.js Holographic Globe — Wireframe WebGL Radar Sphere

<canvas id="globeCanvas"></canvas>
<div class="hg-badge">Wireframe globe · radar pulse</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#020409}
#globeCanvas{display:block;width:100%;height:100%;cursor:grab}
#globeCanvas:active{cursor:grabbing}
.hg-badge{position:fixed;left:18px;top:18px;padding:7px 13px;border-radius:7px;background:rgba(4,10,16,0.7);border:1px solid rgba(34,211,238,0.3);color:#a5f3fc;font:12px ui-monospace,monospace;backdrop-filter:blur(6px)}

const canvas = document.getElementById('globeCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(48, 1, 0.1, 40);
camera.position.set(0, 0, 7);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.9;
controls.minDistance = 4;
controls.maxDistance = 14;

scene.add(new THREE.AmbientLight(0x0e7490, 0.5));
const light = new THREE.PointLight(0x22d3ee, 1.8, 30);
light.position.set(4, 4, 6);
scene.add(light);

// A wireframe sphere gives the classic "hologram globe" latitude/longitude
// look for free — no custom line-drawing needed, just a normal
// SphereGeometry rendered with wireframe: true.
const globe = new THREE.Mesh(
  new THREE.SphereGeometry(2, 24, 16),
  new THREE.MeshBasicMaterial({ color: 0x22d3ee, wireframe: true, transparent: true, opacity: 0.5 })
);
scene.add(globe);

// A second, slightly larger, near-invisible sphere with backside rendering
// adds a soft inner glow at the globe's silhouette edge — a cheap
// stand-in for real rim lighting or Fresnel shading.
const glow = new THREE.Mesh(
  new THREE.SphereGeometry(2.08, 24, 16),
  new THREE.MeshBasicMaterial({ color: 0x67e8f9, transparent: true, opacity: 0.08, side: THREE.BackSide })
);
scene.add(glow);

// Small marker dots on the globe's surface, placed using the same
// spherical-coordinate formula used elsewhere in this library, standing
// in for "cities" or "data points" on a network globe.
const MARKER_COUNT = 10;
const markers = [];
for (let i = 0; i < MARKER_COUNT; i++) {
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  const r = 2.02;
  const pos = new THREE.Vector3(
    r * Math.sin(phi) * Math.cos(theta),
    r * Math.sin(phi) * Math.sin(theta),
    r * Math.cos(phi)
  );
  const marker = new THREE.Mesh(
    new THREE.SphereGeometry(0.045, 8, 8),
    new THREE.MeshBasicMaterial({ color: 0xfef08a })
  );
  marker.position.copy(pos);
  globe.add(marker);
  markers.push(marker);
}

// Radar "ping" rings: flat rings that spawn at zero scale, grow outward
// while fading, and get recycled once fully faded — the same
// spawn-grow-fade-recycle pattern used for any repeating pulse effect.
const RING_COUNT = 4;
const rings = [];
for (let i = 0; i < RING_COUNT; i++) {
  const ring = new THREE.Mesh(
    new THREE.RingGeometry(0.9, 1, 48),
    new THREE.MeshBasicMaterial({ color: 0x22d3ee, transparent: true, opacity: 0, side: THREE.DoubleSide })
  );
  ring.rotation.x = Math.PI / 2;
  scene.add(ring);
  rings.push({ mesh: ring, life: (i / RING_COUNT) });
}

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

const PULSE_SPEED = 0.006;
function animate() {
  requestAnimationFrame(animate);

  globe.rotation.y += 0.0016;

  rings.forEach(r => {
    r.life += PULSE_SPEED;
    if (r.life > 1) r.life -= 1;
    const scale = 0.4 + r.life * 3.2;
    r.mesh.scale.setScalar(scale);
    r.mesh.material.opacity = (1 - r.life) * 0.5;
  });

  controls.update();
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();