@zendir/ui 0.1.0

package/dist/react/3d/EarthViewer.js

@@ -0,0 +1,836 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { GroundTrackMap } from "../charts/GroundTrackMap.js";
+import atmosphereVertexShader from "../../shaders/atmosphere.vert.js";
+import atmosphereFragmentShader from "../../shaders/atmosphere.frag.js";
+import starsVertexShader from "../../shaders/stars.vert.js";
+import starsFragmentShader from "../../shaders/stars.frag.js";
+import { loadThree } from "./threeLoader.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function checkWebGLCapabilities() {
+  try {
+    const canvas = document.createElement("canvas");
+    const gl2 = canvas.getContext("webgl2");
+    if (gl2) {
+      return {
+        available: true,
+        version: 2,
+        maxTextureSize: gl2.getParameter(gl2.MAX_TEXTURE_SIZE)
+      };
+    }
+    const gl = canvas.getContext("webgl");
+    if (gl) {
+      return {
+        available: true,
+        version: 1,
+        maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE)
+      };
+    }
+  } catch {
+  }
+  return { available: false, version: 0, maxTextureSize: 0 };
+}
+const EARTH_RADIUS = 3e3;
+const EARTH_RADIUS_KM = 6371;
+const KM_TO_SCENE = EARTH_RADIUS / EARTH_RADIUS_KM;
+const DEG_TO_RAD = Math.PI / 180;
+function latLonAltToCartesian(lat, lon, altKm = 0) {
+  const r = EARTH_RADIUS + altKm * KM_TO_SCENE;
+  const phi = (90 - lat) * DEG_TO_RAD;
+  const theta = (lon + 180) * DEG_TO_RAD;
+  const x = -r * Math.sin(phi) * Math.cos(theta);
+  const y = r * Math.cos(phi);
+  const z = r * Math.sin(phi) * Math.sin(theta);
+  return [x, y, z];
+}
+function EarthViewer({
+  spacecraft = [],
+  groundStations = [],
+  groundTrack = [],
+  selectedSpacecraftId,
+  width = "100%",
+  height = 400,
+  autoRotate = true,
+  showAtmosphere = true,
+  showOrbits = true,
+  showVisibilityCones = false,
+  onSpacecraftClick,
+  onGroundStationClick,
+  className = "",
+  focusTarget,
+  transitionDuration = 2e3,
+  autoOrbit = false
+}) {
+  const { tokens: _tokens } = useTheme();
+  const containerRef = useRef(null);
+  const rendererRef = useRef(null);
+  const sceneRef = useRef(null);
+  const cameraRef = useRef(null);
+  const earthRef = useRef(null);
+  const controlsRef = useRef(null);
+  const raycasterRef = useRef(null);
+  const mouseRef = useRef(null);
+  const animationRef = useRef(null);
+  const starsMaterialRef = useRef(null);
+  const timeRef = useRef(0);
+  const isUserInteractingRef = useRef(false);
+  const focusTransitionRef = useRef(null);
+  const orbitAngleRef = useRef(0);
+  const lastFocusTargetRef = useRef(null);
+  const isAnimatingRef = useRef(false);
+  const autoRotateRef = useRef(autoRotate);
+  const autoOrbitRef = useRef(autoOrbit);
+  const focusTargetRef = useRef(focusTarget);
+  useEffect(() => {
+    autoRotateRef.current = autoRotate;
+  }, [autoRotate]);
+  useEffect(() => {
+    autoOrbitRef.current = autoOrbit;
+  }, [autoOrbit]);
+  useEffect(() => {
+    focusTargetRef.current = focusTarget;
+  }, [focusTarget]);
+  const [webglCapabilities] = useState(() => checkWebGLCapabilities());
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [threeLoaded, setThreeLoaded] = useState(false);
+  const [THREE, setTHREE] = useState(null);
+  const [OrbitControlsClass, setOrbitControlsClass] = useState(null);
+  const [hoveredObject, setHoveredObject] = useState(null);
+  useEffect(() => {
+    if (!webglCapabilities.available) {
+      setIsLoading(false);
+      return;
+    }
+    loadThree().then(({ THREE: threeModule, OrbitControls: controls }) => {
+      setTHREE(threeModule);
+      setOrbitControlsClass(() => controls);
+      setThreeLoaded(true);
+    }).catch((err) => {
+      setError("Failed to load 3D library");
+      setIsLoading(false);
+    });
+  }, [webglCapabilities.available]);
+  const initScene = useCallback(() => {
+    if (!THREE || !containerRef.current || !OrbitControlsClass) return;
+    const container = containerRef.current;
+    const rect = container.getBoundingClientRect();
+    const w = rect.width;
+    const h = height;
+    const scene = new THREE.Scene();
+    sceneRef.current = scene;
+    const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1e5);
+    camera.position.set(0, 0, 1e4);
+    cameraRef.current = camera;
+    const renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+      powerPreference: "high-performance",
+      preserveDrawingBuffer: true
+      // Prevents flickering from buffer swaps
+    });
+    renderer.setSize(w, h);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    container.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+    const controls = new OrbitControlsClass(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.minDistance = 4500;
+    controls.maxDistance = 2e4;
+    controls.enablePan = false;
+    let interactionTimer;
+    const handleControlStart = () => {
+      isUserInteractingRef.current = true;
+    };
+    const handleControlEnd = () => {
+      clearTimeout(interactionTimer);
+      interactionTimer = setTimeout(() => {
+        isUserInteractingRef.current = false;
+      }, 3e3);
+    };
+    controls.addEventListener("start", handleControlStart);
+    controls.addEventListener("end", handleControlEnd);
+    controlsRef.current = controls;
+    raycasterRef.current = new THREE.Raycaster();
+    mouseRef.current = new THREE.Vector2();
+    const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 64, 32);
+    const earthMaterial = new THREE.MeshPhongMaterial({
+      color: 2245802,
+      shininess: 10
+    });
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.load(
+      "/world.topo.jpg",
+      (texture) => {
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.flipY = true;
+        earthMaterial.map = texture;
+        earthMaterial.needsUpdate = true;
+        setIsLoading(false);
+      },
+      void 0,
+      () => {
+        setIsLoading(false);
+      }
+    );
+    const earth = new THREE.Mesh(earthGeometry, earthMaterial);
+    earth.rotation.y = -Math.PI / 2 + Math.PI;
+    scene.add(earth);
+    earthRef.current = earth;
+    if (showAtmosphere) {
+      const atmosphereGeometry = new THREE.SphereGeometry(EARTH_RADIUS * 1.25, 24, 12);
+      const atmosphereMaterial = new THREE.ShaderMaterial({
+        vertexShader: atmosphereVertexShader,
+        fragmentShader: atmosphereFragmentShader,
+        blending: THREE.AdditiveBlending,
+        side: THREE.BackSide,
+        transparent: true,
+        depthWrite: false
+      });
+      const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+      atmosphere.rotation.y = -Math.PI / 2;
+      scene.add(atmosphere);
+    }
+    const starsCount = 5e3;
+    const starsGeometry = new THREE.BufferGeometry();
+    const starsPositions = new Float32Array(starsCount * 3);
+    const starsOpacities = new Float32Array(starsCount);
+    for (let i = 0; i < starsCount * 3; i += 3) {
+      const radius = 5e4 + Math.random() * 5e4;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      starsPositions[i] = radius * Math.sin(phi) * Math.cos(theta);
+      starsPositions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
+      starsPositions[i + 2] = radius * Math.cos(phi);
+      starsOpacities[i / 3] = Math.random();
+    }
+    starsGeometry.setAttribute("position", new THREE.BufferAttribute(starsPositions, 3));
+    starsGeometry.setAttribute("opacity", new THREE.BufferAttribute(starsOpacities, 1));
+    const starsMaterial = new THREE.ShaderMaterial({
+      uniforms: { time: { value: 0 } },
+      vertexShader: starsVertexShader,
+      fragmentShader: starsFragmentShader,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending
+    });
+    starsMaterialRef.current = starsMaterial;
+    const stars = new THREE.Points(starsGeometry, starsMaterial);
+    scene.add(stars);
+    const ambientLight = new THREE.AmbientLight(4210752, 0.6);
+    scene.add(ambientLight);
+    const sunLight = new THREE.DirectionalLight(16777215, 1.2);
+    sunLight.position.set(1e4, 5e3, 1e4);
+    scene.add(sunLight);
+    return () => {
+      clearTimeout(interactionTimer);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      controls.removeEventListener("start", handleControlStart);
+      controls.removeEventListener("end", handleControlEnd);
+      controls.dispose();
+      renderer.dispose();
+      if (container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+    };
+  }, [THREE, OrbitControlsClass, height, showAtmosphere]);
+  const updateSceneObjects = useCallback(() => {
+    if (!THREE || !sceneRef.current) return;
+    const scene = sceneRef.current;
+    const toRemove = scene.children.filter(
+      (obj) => {
+        var _a, _b, _c, _d;
+        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) || ((_b = obj.userData) == null ? void 0 : _b.isGroundStation) || ((_c = obj.userData) == null ? void 0 : _c.isOrbit) || ((_d = obj.userData) == null ? void 0 : _d.isVisibilityCone);
+      }
+    );
+    toRemove.forEach((obj) => {
+      if (obj.geometry) obj.geometry.dispose();
+      if (obj.material) obj.material.dispose();
+      scene.remove(obj);
+    });
+    spacecraft.forEach((sc) => {
+      const [x, y, z] = latLonAltToCartesian(sc.latitude, sc.longitude, sc.altitude);
+      const isSelected = sc.id === selectedSpacecraftId;
+      const geometry = new THREE.SphereGeometry(isSelected ? 80 : 55, 12, 12);
+      const material = new THREE.MeshBasicMaterial({
+        color: isSelected ? 16766720 : 65416
+      });
+      const marker = new THREE.Mesh(geometry, material);
+      marker.position.set(x, y, z);
+      marker.userData = {
+        isSpacecraft: true,
+        spacecraftId: sc.id,
+        data: sc
+      };
+      scene.add(marker);
+      const glowGeometry = new THREE.RingGeometry(isSelected ? 100 : 80, isSelected ? 130 : 100, 16);
+      const glowMaterial = new THREE.MeshBasicMaterial({
+        color: isSelected ? 16766720 : 65416,
+        transparent: true,
+        opacity: 0.4,
+        side: THREE.DoubleSide
+      });
+      const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+      glow.position.set(x, y, z);
+      glow.lookAt(0, 0, 0);
+      glow.userData = { isSpacecraft: true, isGlow: true };
+      scene.add(glow);
+      const lineGeometry = new THREE.BufferGeometry().setFromPoints([
+        new THREE.Vector3(0, 0, 0),
+        new THREE.Vector3(x, y, z)
+      ]);
+      const lineMaterial = new THREE.LineBasicMaterial({
+        color: isSelected ? 16766720 : 65416,
+        transparent: true,
+        opacity: 0.12
+      });
+      const line = new THREE.Line(lineGeometry, lineMaterial);
+      line.userData = { isSpacecraft: true, isLine: true };
+      scene.add(line);
+    });
+    groundStations.forEach((gs) => {
+      const [x, y, z] = latLonAltToCartesian(gs.latitude, gs.longitude, 0);
+      const geometry = new THREE.ConeGeometry(45, 90, 4);
+      const material = new THREE.MeshBasicMaterial({ color: 65535 });
+      const marker = new THREE.Mesh(geometry, material);
+      marker.position.set(x, y, z);
+      marker.lookAt(0, 0, 0);
+      marker.rotateX(Math.PI / 2);
+      marker.userData = {
+        isGroundStation: true,
+        stationId: gs.id,
+        data: gs
+      };
+      scene.add(marker);
+      const ringGeometry = new THREE.RingGeometry(55, 80, 16);
+      const ringMaterial = new THREE.MeshBasicMaterial({
+        color: 65535,
+        transparent: true,
+        opacity: 0.5,
+        side: THREE.DoubleSide
+      });
+      const ring = new THREE.Mesh(ringGeometry, ringMaterial);
+      ring.position.set(x, y, z);
+      ring.lookAt(0, 0, 0);
+      ring.userData = { isGroundStation: true, isRing: true };
+      scene.add(ring);
+      if (showVisibilityCones) {
+        const coneHeight = 1200;
+        const coneRadius = 600;
+        const coneGeometry = new THREE.ConeGeometry(coneRadius, coneHeight, 16, 1, true);
+        const coneMaterial = new THREE.MeshBasicMaterial({
+          color: 65535,
+          transparent: true,
+          opacity: 0.06,
+          side: THREE.DoubleSide
+        });
+        const cone = new THREE.Mesh(coneGeometry, coneMaterial);
+        cone.position.set(x, y, z);
+        cone.lookAt(0, 0, 0);
+        cone.rotateX(-Math.PI / 2);
+        cone.translateY(coneHeight / 2);
+        cone.userData = { isVisibilityCone: true };
+        scene.add(cone);
+      }
+    });
+    if (showOrbits && groundTrack.length > 1) {
+      const points = [];
+      groundTrack.forEach((pt, i) => {
+        const alt = pt.alt || (spacecraft.length > 0 ? spacecraft[0].altitude : 400);
+        const [x, y, z] = latLonAltToCartesian(pt.latitude, pt.longitude, alt);
+        if (i > 0) {
+          const prevPt = groundTrack[i - 1];
+          const lonDiff = Math.abs(pt.longitude - prevPt.longitude);
+          if (lonDiff > 180) {
+            if (points.length > 1) {
+              const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
+              const lineMaterial = new THREE.LineBasicMaterial({
+                color: 2282478,
+                transparent: true,
+                opacity: 0.7
+              });
+              const line = new THREE.Line(lineGeometry, lineMaterial);
+              line.userData = { isOrbit: true };
+              scene.add(line);
+            }
+            points.length = 0;
+          }
+        }
+        points.push(new THREE.Vector3(x, y, z));
+      });
+      if (points.length > 1) {
+        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
+        const lineMaterial = new THREE.LineBasicMaterial({
+          color: 2282478,
+          transparent: true,
+          opacity: 0.7
+        });
+        const line = new THREE.Line(lineGeometry, lineMaterial);
+        line.userData = { isOrbit: true };
+        scene.add(line);
+      }
+    }
+  }, [THREE, spacecraft, groundStations, groundTrack, selectedSpacecraftId, showOrbits, showVisibilityCones]);
+  const handleMouseMove = useCallback((event) => {
+    if (!containerRef.current || !raycasterRef.current || !cameraRef.current || !sceneRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
+    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    mouseRef.current.set(x, y);
+    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
+    const interactables = sceneRef.current.children.filter(
+      (obj) => {
+        var _a, _b, _c, _d, _e;
+        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) && !((_b = obj.userData) == null ? void 0 : _b.isGlow) && !((_c = obj.userData) == null ? void 0 : _c.isLine) || ((_d = obj.userData) == null ? void 0 : _d.isGroundStation) && !((_e = obj.userData) == null ? void 0 : _e.isRing);
+      }
+    );
+    const intersects = raycasterRef.current.intersectObjects(interactables);
+    if (intersects.length > 0) {
+      const hit = intersects[0].object;
+      const userData = hit.userData;
+      if (userData.isSpacecraft) {
+        const sc = userData.data;
+        setHoveredObject({
+          type: "spacecraft",
+          id: userData.spacecraftId,
+          name: (sc == null ? void 0 : sc.name) || userData.spacecraftId,
+          data: sc,
+          screenX: event.clientX - rect.left,
+          screenY: event.clientY - rect.top
+        });
+      } else if (userData.isGroundStation) {
+        const gs = userData.data;
+        setHoveredObject({
+          type: "groundStation",
+          id: userData.stationId,
+          name: (gs == null ? void 0 : gs.name) || userData.stationId,
+          data: gs,
+          screenX: event.clientX - rect.left,
+          screenY: event.clientY - rect.top
+        });
+      }
+      if (containerRef.current) {
+        containerRef.current.style.cursor = "pointer";
+      }
+    } else {
+      setHoveredObject(null);
+      if (containerRef.current) {
+        containerRef.current.style.cursor = "grab";
+      }
+    }
+  }, []);
+  const handleClick = useCallback((event) => {
+    if (!containerRef.current || !raycasterRef.current || !cameraRef.current || !sceneRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
+    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    mouseRef.current.set(x, y);
+    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
+    const interactables = sceneRef.current.children.filter(
+      (obj) => {
+        var _a, _b, _c, _d, _e;
+        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) && !((_b = obj.userData) == null ? void 0 : _b.isGlow) && !((_c = obj.userData) == null ? void 0 : _c.isLine) || ((_d = obj.userData) == null ? void 0 : _d.isGroundStation) && !((_e = obj.userData) == null ? void 0 : _e.isRing);
+      }
+    );
+    const intersects = raycasterRef.current.intersectObjects(interactables);
+    if (intersects.length > 0) {
+      const hit = intersects[0].object;
+      const userData = hit.userData;
+      if (userData.isSpacecraft && onSpacecraftClick) {
+        onSpacecraftClick(userData.data);
+      } else if (userData.isGroundStation && onGroundStationClick) {
+        onGroundStationClick(userData.data);
+      }
+    }
+  }, [onSpacecraftClick, onGroundStationClick]);
+  useEffect(() => {
+    if (!THREE || !cameraRef.current || !controlsRef.current || !focusTarget) return;
+    const targetKey = focusTarget.id || focusTarget.name || JSON.stringify(focusTarget);
+    const lastKey = lastFocusTargetRef.current ? lastFocusTargetRef.current.id || lastFocusTargetRef.current.name || JSON.stringify(lastFocusTargetRef.current) : null;
+    if (targetKey === lastKey) return;
+    lastFocusTargetRef.current = focusTarget;
+    const camera = cameraRef.current;
+    const controls = controlsRef.current;
+    let targetLat = 0;
+    let targetLon = 0;
+    let targetZoom = 2;
+    if (focusTarget.latitude !== void 0 && focusTarget.longitude !== void 0) {
+      targetLat = focusTarget.latitude;
+      targetLon = focusTarget.longitude;
+      targetZoom = focusTarget.zoom ?? 2;
+    } else if (focusTarget.type === "spacecraft" && focusTarget.id) {
+      const sc = spacecraft.find((s) => s.id === focusTarget.id);
+      if (sc) {
+        targetLat = sc.latitude;
+        targetLon = sc.longitude;
+        targetZoom = 2.5;
+      }
+    } else if (focusTarget.type === "groundStation" && focusTarget.id) {
+      const gs = groundStations.find((g) => g.id === focusTarget.id);
+      if (gs) {
+        targetLat = gs.latitude;
+        targetLon = gs.longitude;
+        targetZoom = 2;
+      }
+    } else if (focusTarget.type === "overview") {
+      targetLat = 0;
+      targetLon = 0;
+      targetZoom = 1;
+    }
+    const [targetX, targetY, targetZ] = latLonAltToCartesian(targetLat, targetLon, 0);
+    const baseDistance = 1e4;
+    const zoomFactor = 1 / targetZoom;
+    const cameraDistance = baseDistance * zoomFactor;
+    const offset = new THREE.Vector3(targetX, targetY, targetZ).normalize().multiplyScalar(cameraDistance);
+    const targetPos = [
+      targetX + offset.x,
+      targetY + offset.y,
+      targetZ + offset.z
+    ];
+    const startPos = [
+      camera.position.x,
+      camera.position.y,
+      camera.position.z
+    ];
+    const startTarget = [
+      controls.target.x,
+      controls.target.y,
+      controls.target.z
+    ];
+    const targetTarget = [targetX, targetY, targetZ];
+    focusTransitionRef.current = {
+      startTime: Date.now(),
+      startPos,
+      targetPos,
+      startTarget,
+      targetTarget,
+      duration: transitionDuration,
+      isActive: true
+    };
+    orbitAngleRef.current = 0;
+  }, [THREE, focusTarget, transitionDuration, spacecraft, groundStations]);
+  const animate = useCallback(() => {
+    var _a;
+    if (!isAnimatingRef.current) return;
+    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
+    const camera = cameraRef.current;
+    const controls = controlsRef.current;
+    if (focusTransitionRef.current && focusTransitionRef.current.isActive) {
+      const transition = focusTransitionRef.current;
+      const elapsed = Date.now() - transition.startTime;
+      const progress = Math.min(elapsed / transition.duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      camera.position.x = transition.startPos[0] + (transition.targetPos[0] - transition.startPos[0]) * easeProgress;
+      camera.position.y = transition.startPos[1] + (transition.targetPos[1] - transition.startPos[1]) * easeProgress;
+      camera.position.z = transition.startPos[2] + (transition.targetPos[2] - transition.startPos[2]) * easeProgress;
+      controls.target.x = transition.startTarget[0] + (transition.targetTarget[0] - transition.startTarget[0]) * easeProgress;
+      controls.target.y = transition.startTarget[1] + (transition.targetTarget[1] - transition.startTarget[1]) * easeProgress;
+      controls.target.z = transition.startTarget[2] + (transition.targetTarget[2] - transition.startTarget[2]) * easeProgress;
+      if (progress >= 1) {
+        transition.isActive = false;
+      }
+    }
+    const currentFocusTarget = focusTargetRef.current;
+    const currentAutoOrbit = autoOrbitRef.current;
+    const currentAutoRotate = autoRotateRef.current;
+    if (currentAutoOrbit && currentFocusTarget && !((_a = focusTransitionRef.current) == null ? void 0 : _a.isActive) && !isUserInteractingRef.current) {
+      orbitAngleRef.current += 5e-3;
+      if (currentFocusTarget.latitude !== void 0 && currentFocusTarget.longitude !== void 0) {
+        const [targetX, targetY, targetZ] = latLonAltToCartesian(
+          currentFocusTarget.latitude,
+          currentFocusTarget.longitude,
+          0
+        );
+        const baseDistance = 1e4 / (currentFocusTarget.zoom ?? 2);
+        const orbitRadius = baseDistance * 0.3;
+        camera.position.x = targetX + Math.cos(orbitAngleRef.current) * orbitRadius;
+        camera.position.y = targetY + Math.sin(orbitAngleRef.current * 0.5) * orbitRadius * 0.5;
+        camera.position.z = targetZ + Math.sin(orbitAngleRef.current) * orbitRadius;
+        controls.target.set(targetX, targetY, targetZ);
+      }
+    }
+    if (controls) {
+      controls.update();
+    }
+    timeRef.current += 0.01;
+    if (starsMaterialRef.current) {
+      starsMaterialRef.current.uniforms.time.value = timeRef.current;
+    }
+    if (currentAutoRotate && earthRef.current && !isUserInteractingRef.current && !currentAutoOrbit) {
+      earthRef.current.rotation.y += 6e-4;
+    }
+    rendererRef.current.render(sceneRef.current, camera);
+    animationRef.current = requestAnimationFrame(animate);
+  }, []);
+  useEffect(() => {
+    if (!threeLoaded || !webglCapabilities.available || !OrbitControlsClass) return;
+    isAnimatingRef.current = false;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    const cleanup = initScene();
+    isAnimatingRef.current = true;
+    animate();
+    return () => {
+      isAnimatingRef.current = false;
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+      cleanup == null ? void 0 : cleanup();
+    };
+  }, [threeLoaded, webglCapabilities.available, OrbitControlsClass, initScene, animate]);
+  useEffect(() => {
+    if (threeLoaded) {
+      updateSceneObjects();
+    }
+  }, [threeLoaded, updateSceneObjects]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !threeLoaded) return;
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("click", handleClick);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("click", handleClick);
+    };
+  }, [threeLoaded, handleMouseMove, handleClick]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (!containerRef.current || !rendererRef.current || !cameraRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      cameraRef.current.aspect = rect.width / height;
+      cameraRef.current.updateProjectionMatrix();
+      rendererRef.current.setSize(rect.width, height);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [height]);
+  if (!webglCapabilities.available || error) {
+    return /* @__PURE__ */ jsxs("div", { className: `zendir-earth-viewer fallback ${className}`, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        GroundTrackMap,
+        {
+          groundTrack,
+          groundStations,
+          width,
+          height
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        bottom: 8,
+        right: 8,
+        backgroundColor: "rgba(0,0,0,0.7)",
+        color: "#d1d5db",
+        padding: "4px 8px",
+        borderRadius: 4,
+        fontSize: 10
+      }, children: error || "2D Mode (WebGL unavailable)" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `zendir-earth-viewer ${className}`,
+      style: {
+        width,
+        height,
+        position: "relative",
+        backgroundColor: "#030508",
+        borderRadius: 8,
+        overflow: "hidden",
+        cursor: "grab"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: { width: "100%", height: "100%" }
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          color: "#22d3ee",
+          fontSize: 14,
+          fontFamily: "ui-monospace, monospace"
+        }, children: "Loading 3D Earth..." }),
+        !isLoading && /* @__PURE__ */ jsxs("div", { style: {
+          position: "absolute",
+          top: 8,
+          left: 8,
+          backgroundColor: "rgba(0,0,0,0.75)",
+          color: "#e4e4e7",
+          padding: "10px 14px",
+          borderRadius: 8,
+          fontSize: 11,
+          fontFamily: "ui-monospace, monospace",
+          display: "flex",
+          flexDirection: "column",
+          gap: 5,
+          backdropFilter: "blur(4px)"
+        }, children: [
+          spacecraft.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#00ff88", fontSize: 14 }, children: "●" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              spacecraft.length,
+              " spacecraft"
+            ] })
+          ] }),
+          groundStations.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#00ffff", fontSize: 12 }, children: "▲" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              groundStations.length,
+              " ground stations"
+            ] })
+          ] })
+        ] }),
+        !isLoading && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          bottom: 8,
+          right: 8,
+          backgroundColor: "rgba(0,0,0,0.6)",
+          color: "#b8bcc8",
+          padding: "5px 10px",
+          borderRadius: 6,
+          fontSize: 9,
+          fontFamily: "system-ui"
+        }, children: "Drag to rotate • Scroll to zoom" }),
+        hoveredObject && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: Math.min(hoveredObject.screenX + 15, (typeof width === "number" ? width : 400) - 200),
+              top: Math.max(hoveredObject.screenY - 10, 10),
+              backgroundColor: "rgba(9, 9, 11, 0.95)",
+              color: "#e4e4e7",
+              padding: "12px 16px",
+              borderRadius: 10,
+              fontSize: 11,
+              fontFamily: "ui-monospace, monospace",
+              border: hoveredObject.type === "spacecraft" ? "1px solid #22c55e" : "1px solid #22d3ee",
+              boxShadow: "0 12px 40px rgba(0,0,0,0.6)",
+              pointerEvents: "none",
+              zIndex: 100,
+              minWidth: 180,
+              backdropFilter: "blur(8px)"
+            },
+            children: [
+              hoveredObject.type === "spacecraft" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: 8, color: "#22c55e", fontSize: "0.8125rem", display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx(AstroIcon, { name: "satellite", size: "small", label: "" }),
+                  " ",
+                  hoveredObject.name
+                ] }),
+                hoveredObject.data && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Latitude" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      hoveredObject.data.latitude.toFixed(3),
+                      "°"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Longitude" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      hoveredObject.data.longitude.toFixed(3),
+                      "°"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Altitude" }),
+                    /* @__PURE__ */ jsxs("span", { style: { color: "#22d3ee" }, children: [
+                      hoveredObject.data.altitude.toFixed(1),
+                      " km"
+                    ] })
+                  ] }),
+                  hoveredObject.data.velocity && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Velocity" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      (hoveredObject.data.velocity || 0).toFixed(3),
+                      " km/s"
+                    ] })
+                  ] })
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: 8, color: "#22d3ee", fontSize: "0.8125rem", display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx(AstroIcon, { name: "antenna", size: "small", label: "" }),
+                  " ",
+                  hoveredObject.name
+                ] }),
+                hoveredObject.data && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Latitude" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      hoveredObject.data.latitude.toFixed(3),
+                      "°"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Longitude" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      hoveredObject.data.longitude.toFixed(3),
+                      "°"
+                    ] })
+                  ] }),
+                  hoveredObject.data.minElevation !== void 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      color: "#b8bcc8"
+                      /* WCAG: improved contrast */
+                    }, children: "Min Elevation" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      hoveredObject.data.minElevation,
+                      "°"
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: {
+                marginTop: 8,
+                paddingTop: 8,
+                borderTop: "1px solid rgba(113,113,122,0.3)",
+                color: "#9ca3af",
+                fontSize: 9
+              }, children: "Click for details" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EarthViewer
+};
+//# sourceMappingURL=EarthViewer.js.map