fix(satellites): fix ring size attenuation and breathing animation

- Add sizeAttenuation: false to sprite materials for fixed ring size - Move breathing animation parameters to SATELLITE_CONFIG constants - Export updateBreathingPhase function to avoid ES module binding issues - Adjust breathing speed and amplitude for better visual effect
feat(earth): add predicted orbit display for locked satellites
2026-03-23 17:41:27 +08:00 · 2026-03-23 05:41:44 +08:00 · 2026-03-23 03:56:45 +08:00
5 changed files with 432 additions and 47 deletions
--- a/.sisyphus/plans/predicted-orbit.md
+++ b/.sisyphus/plans/predicted-orbit.md
@@ -0,0 +1,136 @@
+# 卫星预测轨道显示功能
+
+## TL;DR
+> 锁定卫星时显示绕地球完整一圈的预测轨道轨迹，从当前位置向外渐变消失
+
+## Context
+
+### 目标
+点击锁定卫星 → 显示该卫星绕地球一周的完整预测轨道（而非当前的历史轨迹）
+
+### 当前实现
+- `TRAIL_LENGTH = 30` - 历史轨迹点数，每帧 push 当前位置
+- 显示最近30帧历史轨迹（类似彗星尾巴）
+
+### 参考: SatelliteMap.space
+- 锁定时显示预测轨道
+- 颜色从当前位置向外渐变消失
+- 使用 satellite.js（与本项目相同）
+
+## 实现状态
+
+### ✅ 已完成
+- [x] 计算卫星轨道周期（基于 `meanMotion`）
+- [x] 生成预测轨道点（10秒采样间隔）
+- [x] 创建独立预测轨道渲染对象
+- [x] 锁定卫星时显示预测轨道
+- [x] 解除锁定时隐藏预测轨道
+- [x] 颜色渐变：当前位置(亮) → 轨道终点(暗)
+- [x] 页面隐藏时清除轨迹（防止切回时闪现）
+
+### 🚧 进行中
+- [ ] 完整圆环轨道（部分卫星因 SGP4 计算问题使用 fallback 圆形轨道）
+- [ ] 每颗卫星只显示一条轨道
+
+## 技术细节
+
+### 轨道周期计算
+```javascript
+function calculateOrbitalPeriod(meanMotion) {
+  return 86400 / meanMotion;
+}
+```
+
+### 预测轨道计算
+```javascript
+function calculatePredictedOrbit(satellite, periodSeconds, sampleInterval = 10) {
+  const points = [];
+  const samples = Math.ceil(periodSeconds / sampleInterval);
+  const now = new Date();
+  
+  // Full orbit: from now to now+period
+  for (let i = 0; i <= samples; i++) {
+    const time = new Date(now.getTime() + i * sampleInterval * 1000);
+    const pos = computeSatellitePosition(satellite, time);
+    if (pos) points.push(pos);
+  }
+  
+  // Fallback: 如果真实位置计算点太少，使用圆形 fallback
+  if (points.length < samples * 0.5) {
+    points.length = 0;
+    // ... 圆形轨道生成
+  }
+  
+  return points;
+}
+```
+
+### 渲染对象
+```javascript
+let predictedOrbitLine = null;
+
+export function showPredictedOrbit(satellite) {
+  hidePredictedOrbit();
+  // ... 计算并渲染轨道
+}
+
+export function hidePredictedOrbit() {
+  if (predictedOrbitLine) {
+    earthObjRef.remove(predictedOrbitLine);
+    predictedOrbitLine.geometry.dispose();
+    predictedOrbitLine.material.dispose();
+    predictedOrbitLine = null;
+  }
+}
+```
+
+## 已知问题
+
+### 1. TLE 格式问题
+`computeSatellitePosition` 使用自行构建的 TLE 格式，对某些卫星返回 null。当前使用 fallback 圆形轨道作为补偿。
+
+### 2. 多条轨道
+部分情况下锁定时会显示多条轨道。需要确保 `hidePredictedOrbit()` 被正确调用。
+
+## 性能考虑
+
+### 点数估算
+| 卫星类型 | 周期 | 10秒采样 | 点数 |
+|---------|------|---------|------|
+| LEO | 90分钟 | 540秒 | ~54点 |
+| MEO | 12小时 | 4320秒 | ~432点 |
+| GEO | 24小时 | 8640秒 | ~864点 |
+
+### 优化策略
+- 当前方案（~900点 GEO）性能可接受
+- 如遇性能问题：GEO 降低采样率到 30秒
+
+## 验证方案
+
+### QA Scenarios
+
+**Scenario: 锁定 Starlink 卫星显示预测轨道**
+1. 打开浏览器，进入 Earth 页面
+2. 显示卫星（点击按钮）
+3. 点击一颗 Starlink 卫星（低轨道 LEO）
+4. 验证：出现黄色预测轨道线，从卫星向外绕行
+5. 验证：颜色从亮黄渐变到暗蓝
+6. 验证：轨道完整闭环
+
+**Scenario: 锁定 GEO 卫星显示预测轨道**
+1. 筛选一颗 GEO 卫星（倾斜角 0-10° 或高轨道）
+2. 点击锁定
+3. 验证：显示完整 24 小时轨道（或 fallback 圆形轨道）
+4. 验证：点数合理（~864点或 fallback）
+
+**Scenario: 解除锁定隐藏预测轨道**
+1. 锁定一颗卫星，显示预测轨道
+2. 点击地球空白处解除锁定
+3. 验证：预测轨道消失
+
+**Scenario: 切换页面后轨迹不闪现**
+1. 锁定一颗卫星
+2. 切换到其他标签页
+3. 等待几秒
+4. 切回页面
+5. 验证：轨迹不突然闪现累积
--- a/frontend/public/earth/js/constants.js
+++ b/frontend/public/earth/js/constants.js
@@ -54,10 +54,24 @@ export const CABLE_STATE = {
 };

 export const SATELLITE_CONFIG = {
-  maxCount: 2000,
-  dotSize: 1.5,
-  trailLength: 30,
-  apiPath: '/api/v1/visualization/geo/satellites'
+  maxCount: 5000,
+  trailLength: 10,
+  dotSize: 4,
+  ringSize: 0.07,
+  apiPath: '/api/v1/visualization/geo/satellites',
+  breathingSpeed: 0.08,
+  breathingScaleAmplitude: 0.15,
+  breathingOpacityMin: 0.5,
+  breathingOpacityMax: 0.8,
+  dotBreathingSpeed: 0.12,
+  dotBreathingScaleAmplitude: 0.2,
+  dotOpacityMin: 0.7,
+  dotOpacityMax: 1.0
+};
+
+export const PREDICTED_ORBIT_CONFIG = {
+  sampleInterval: 10,
+  opacity: 0.8
 };

 export const GRID_CONFIG = {
--- a/frontend/public/earth/js/main.js
+++ b/frontend/public/earth/js/main.js
@@ -14,7 +14,7 @@ import {
 } from './ui.js';
 import { createEarth, createClouds, createTerrain, createStars, createGridLines, toggleTerrain, getEarth } from './earth.js';
 import { loadGeoJSONFromPath, loadLandingPoints, handleCableClick, clearCableSelection, getCableLines, getCablesById, lockedCable as cableLocked, getCableState, setCableState, clearAllCableStates, applyLandingPointVisualState, resetLandingPointVisualState, getAllLandingPoints, getShowCables } from './cables.js';
-import { createSatellites, loadSatellites, updateSatellitePositions, toggleSatellites, toggleTrails, getShowSatellites, selectSatellite, getSatelliteData, getSatellitePoints, setSatelliteRingState, updateLockedRingPosition, updateHoverRingPosition, getSatellitePositions } from './satellites.js';
+import { createSatellites, loadSatellites, updateSatellitePositions, toggleSatellites, toggleTrails, getShowSatellites, getSatelliteCount, selectSatellite, getSatelliteData, getSatellitePoints, setSatelliteRingState, updateLockedRingPosition, updateHoverRingPosition, getSatellitePositions, showPredictedOrbit, hidePredictedOrbit, updateBreathingPhase } from './satellites.js';
 import { setupControls, getAutoRotate, getShowTerrain, zoomLevel, setAutoRotate, toggleAutoRotate, resetView } from './controls.js';
 import { initInfoCard, showInfoCard, hideInfoCard, getCurrentType, setInfoCardNoBorder } from './info-card.js';

@@ -32,8 +32,12 @@ let lockedObject = null;
 let lockedObjectType = null;
 let dragStartTime = 0;
 let isLongDrag = false;
+let lastSatClickTime = 0;
+let lastSatClickIndex = 0;
+let lastSatClickPos = { x: 0, y: 0 };

 export function clearLockedObject() {
+  hidePredictedOrbit();
  hoveredCable = null;
  hoveredSatellite = null;
  hoveredSatelliteIndex = null;
@@ -43,6 +47,7 @@ export function clearLockedObject() {
  lockedObjectType = null;
  lockedSatellite = null;
  lockedSatelliteIndex = null;
+  window.lockedSatelliteIndex = null;
  cableLockedData = null;
 }

@@ -134,6 +139,7 @@ export function init() {
  
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = CONFIG.defaultCameraZ;
+  window.camera = camera;
  
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, powerPreference: 'high-performance' });
  renderer.setSize(window.innerWidth, window.innerHeight);
@@ -202,6 +208,7 @@ async function loadData(showWhiteSphere = false) {
      (async () => {
        const satCount = await loadSatellites();
        console.log(`卫星数据加载完成: ${satCount} 颗`);
+        document.getElementById('satellite-count').textContent = satCount + ' 颗';
        updateSatellitePositions();
        console.log('卫星位置已更新');
        toggleSatellites(true);
@@ -428,8 +435,26 @@ function onClick(event, camera, renderer) {
    setAutoRotate(false);
    handleCableClick(clickedCable);
  } else if (satIntersects.length > 0) {
-    const index = satIntersects[0].index;
-    const sat = selectSatellite(index);
+    const now = Date.now();
+    const clickX = event.clientX;
+    const clickY = event.clientY;
+    
+    let selectedIndex;
+    if (satIntersects.length > 1 && 
+        now - lastSatClickTime < 500 &&
+        Math.abs(clickX - lastSatClickPos.x) < 30 &&
+        Math.abs(clickY - lastSatClickPos.y) < 30) {
+      const currentIdx = satIntersects.findIndex(s => s.index === lastSatClickIndex);
+      selectedIndex = satIntersects[(currentIdx + 1) % satIntersects.length].index;
+    } else {
+      selectedIndex = satIntersects[0].index;
+    }
+    
+    lastSatClickTime = now;
+    lastSatClickIndex = selectedIndex;
+    lastSatClickPos = { x: clickX, y: clickY };
+    
+    const sat = selectSatellite(selectedIndex);
    
    if (sat && sat.properties) {
      clearLockedObject();
@@ -437,12 +462,14 @@ function onClick(event, camera, renderer) {
      lockedObject = sat;
      lockedObjectType = 'satellite';
      lockedSatellite = sat;
-      lockedSatelliteIndex = index;
+      lockedSatelliteIndex = selectedIndex;
+      window.lockedSatelliteIndex = selectedIndex;
+      showPredictedOrbit(sat);
      setAutoRotate(false);
      
      const satPositions = getSatellitePositions();
-      if (satPositions && satPositions[index]) {
-        setSatelliteRingState(index, 'locked', satPositions[index].current);
+      if (satPositions && satPositions[selectedIndex]) {
+        setSatelliteRingState(selectedIndex, 'locked', satPositions[selectedIndex].current);
      }
      
      const props = sat.properties;
@@ -498,6 +525,9 @@ function animate() {
  
  const satPositions = getSatellitePositions();
  
+  // 更新呼吸动画相位
+  updateBreathingPhase();
+
  if (lockedObjectType === 'satellite' && lockedSatelliteIndex !== null) {
    if (satPositions && satPositions[lockedSatelliteIndex]) {
      updateLockedRingPosition(satPositions[lockedSatelliteIndex].current);
--- a/frontend/public/earth/js/satellites.js
+++ b/frontend/public/earth/js/satellites.js
@@ -14,13 +14,19 @@ let selectedSatellite = null;
 let satellitePositions = [];
 let hoverRingSprite = null;
 let lockedRingSprite = null;
+let lockedDotSprite = null;
+export let breathingPhase = 0;
+
+export function updateBreathingPhase() {
+  breathingPhase += SATELLITE_CONFIG.breathingSpeed;
+}

 const SATELLITE_API = SATELLITE_CONFIG.apiPath + '?limit=' + SATELLITE_CONFIG.maxCount;
 const MAX_SATELLITES = SATELLITE_CONFIG.maxCount;
 const TRAIL_LENGTH = SATELLITE_CONFIG.trailLength;
 const DOT_TEXTURE_SIZE = 32;

-function createCircularDotTexture() {
+function createDotTexture() {
  const canvas = document.createElement('canvas');
  canvas.width = DOT_TEXTURE_SIZE;
  canvas.height = DOT_TEXTURE_SIZE;
@@ -68,7 +74,7 @@ export function createSatellites(scene, earthObj) {
  const positions = new Float32Array(MAX_SATELLITES * 3);
  const colors = new Float32Array(MAX_SATELLITES * 3);
  
-  const dotTexture = createCircularDotTexture();
+  const dotTexture = createDotTexture();
  
  const pointsGeometry = new THREE.BufferGeometry();
  pointsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
@@ -80,13 +86,27 @@ export function createSatellites(scene, earthObj) {
    vertexColors: true,
    transparent: true,
    opacity: 0.9,
-    sizeAttenuation: true,
+    sizeAttenuation: false,
    alphaTest: 0.1
  });
  
  satellitePoints = new THREE.Points(pointsGeometry, pointsMaterial);
  satellitePoints.visible = false;
  satellitePoints.userData = { type: 'satellitePoints' };
+  
+  const originalScale = { x: 1, y: 1, z: 1 };
+  satellitePoints.onBeforeRender = (renderer, scene, camera, geometry, material) => {
+    if (earthObj && earthObj.scale.x !== 1) {
+      satellitePoints.scale.set(
+        originalScale.x / earthObj.scale.x,
+        originalScale.y / earthObj.scale.y,
+        originalScale.z / earthObj.scale.z
+      );
+    } else {
+      satellitePoints.scale.set(originalScale.x, originalScale.y, originalScale.z);
+    }
+  };
+  
  earthObj.add(satellitePoints);
  
  const trailPositions = new Float32Array(MAX_SATELLITES * TRAIL_LENGTH * 3);
@@ -112,7 +132,9 @@ export function createSatellites(scene, earthObj) {
  for (let i = 0; i < MAX_SATELLITES; i++) {
    satellitePositions.push({
      current: new THREE.Vector3(),
-      trail: []
+      trail: [],
+      trailIndex: 0,
+      trailCount: 0
    });
  }
  
@@ -135,12 +157,19 @@ function computeSatellitePosition(satellite, time) {
    const meanMotion = props.mean_motion || 15;
    const epoch = props.epoch || '';
    
-    const year = epoch && epoch.length >= 4 ? parseInt(epoch.substring(0, 4)) : time.getUTCFullYear();
-    const month = epoch && epoch.length >= 7 ? parseInt(epoch.substring(5, 7)) : time.getUTCMonth() + 1;
-    const day = epoch && epoch.length >= 10 ? parseInt(epoch.substring(8, 10)) : time.getUTCDate();
+    // Simplified epoch calculation
+    let epochDate = epoch && epoch.length >= 10 ? new Date(epoch) : time;
+    const epochYear = epochDate.getUTCFullYear() % 100;
+    const startOfYear = new Date(Date.UTC(epochDate.getUTCFullYear(), 0, 1));
+    const dayOfYear = Math.floor((epochDate - startOfYear) / 86400000) + 1;
+    const msOfDay = epochDate.getUTCHours() * 3600000 + epochDate.getUTCMinutes() * 60000 + epochDate.getUTCSeconds() * 1000 + epochDate.getUTCMilliseconds();
+    const dayFraction = msOfDay / 86400000;
+    const epochStr = String(epochYear).padStart(2, '0') + String(dayOfYear).padStart(3, '0') + '.' + dayFraction.toFixed(8).substring(2);
    
-    const tleLine1 = `1 ${String(noradId).padStart(5, '0')}U 00001A   ${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}.00000000  .00000000  00000-0  00000-0  0  9999`;
-    const tleLine2 = `2 ${String(noradId).padStart(5, '0')} ${String(raan.toFixed(4)).padStart(8, ' ')} ${String(inclination.toFixed(4)).padStart(8, ' ')} ${String(eccentricity.toFixed(7)).replace('0.', '.')} ${String(argOfPerigee.toFixed(4)).padStart(8, ' ')} ${String(meanAnomaly.toFixed(4)).padStart(8, ' ')} ${String(meanMotion.toFixed(8)).padStart(11, ' ')}  0  9999`;
+    // Format eccentricity as "0.0001652" (7 chars after decimal)
+    const eccStr = '0' + eccentricity.toFixed(7);
+    const tleLine1 = `1 ${noradId.toString().padStart(5)}U 00001A   ${epochStr}  .00000000  00000-0  00000-0  0  9999`;
+    const tleLine2 = `2 ${noradId.toString().padStart(5)} ${raan.toFixed(4).padStart(8)} ${inclination.toFixed(4).padStart(8)} ${eccStr.substring(1)} ${argOfPerigee.toFixed(4).padStart(8)} ${meanAnomaly.toFixed(4).padStart(8)} ${meanMotion.toFixed(8).padStart(11)}  0  9999`;
    
    const satrec = twoline2satrec(tleLine1, tleLine2);
    if (!satrec || satrec.error) {
@@ -208,7 +237,7 @@ export async function loadSatellites() {
    satelliteData = data.features || [];
    
    console.log(`Loaded ${satelliteData.length} satellites`);
-    return satelliteData;
+    return satelliteData.length;
  } catch (error) {
    console.error('Failed to load satellites:', error);
    return [];
@@ -244,9 +273,11 @@ export function updateSatellitePositions(deltaTime = 0) {
    
    satellitePositions[i].current.copy(pos);
    
-    satellitePositions[i].trail.push(pos.clone());
-    if (satellitePositions[i].trail.length > TRAIL_LENGTH) {
-      satellitePositions[i].trail.shift();
+    const satPos = satellitePositions[i];
+    if (i !== window.lockedSatelliteIndex) {
+      satPos.trail[satPos.trailIndex] = pos.clone();
+      satPos.trailIndex = (satPos.trailIndex + 1) % TRAIL_LENGTH;
+      if (satPos.trailCount < TRAIL_LENGTH) satPos.trailCount++;
    }
    
    positions[i * 3] = pos.x;
@@ -276,17 +307,22 @@ export function updateSatellitePositions(deltaTime = 0) {
    colors[i * 3 + 1] = g;
    colors[i * 3 + 2] = b;
    
-    const trail = satellitePositions[i].trail;
+    const sp = satellitePositions[i];
+    const trail = sp.trail;
+    const tc = sp.trailCount;
+    const ti = sp.trailIndex;
+    
    for (let j = 0; j < TRAIL_LENGTH; j++) {
      const trailIdx = (i * TRAIL_LENGTH + j) * 3;
      
-      if (j < trail.length) {
-        const t = trail[j];
+      if (j < tc) {
+        const idx = (ti - tc + j + TRAIL_LENGTH) % TRAIL_LENGTH;
+        const t = trail[idx];
+        if (t) {
          trailPositions[trailIdx] = t.x;
          trailPositions[trailIdx + 1] = t.y;
          trailPositions[trailIdx + 2] = t.z;
-        
-        const alpha = j / trail.length;
+          const alpha = (j + 1) / tc;
          trailColors[trailIdx] = r * alpha;
          trailColors[trailIdx + 1] = g * alpha;
          trailColors[trailIdx + 2] = b * alpha;
@@ -298,10 +334,18 @@ export function updateSatellitePositions(deltaTime = 0) {
          trailColors[trailIdx + 1] = 0;
          trailColors[trailIdx + 2] = 0;
        }
+      } else {
+        trailPositions[trailIdx] = pos.x;
+        trailPositions[trailIdx + 1] = pos.y;
+        trailPositions[trailIdx + 2] = pos.z;
+        trailColors[trailIdx] = 0;
+        trailColors[trailIdx + 1] = 0;
+        trailColors[trailIdx + 2] = 0;
+      }
    }
  }
  
-  for (let i = count; i < 2000; i++) {
+  for (let i = count; i < MAX_SATELLITES; i++) {
    positions[i * 3] = 0;
    positions[i * 3 + 1] = 0;
    positions[i * 3 + 2] = 0;
@@ -382,12 +426,19 @@ export function showHoverRing(position, isLocked = false) {
    map: ringTexture,
    transparent: true,
    opacity: 0.8,
-    depthTest: false
+    depthTest: false,
+    sizeAttenuation: false
  });
  
+  const ringSize = SATELLITE_CONFIG.ringSize;
  const sprite = new THREE.Sprite(spriteMaterial);
  sprite.position.copy(position);
-  sprite.scale.set(3, 3, 1);
+  
+  const camera = window.camera;
+  const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
+  const scale = ringSize;
+  sprite.scale.set(scale, scale, 1);
+  console.log(`[Ring create] ringSize: ${ringSize}, camDist: ${cameraDistance}, scale: ${scale}`);
  
  earthObjRef.add(sprite);
  
@@ -396,6 +447,24 @@ export function showHoverRing(position, isLocked = false) {
      earthObjRef.remove(lockedRingSprite);
    }
    lockedRingSprite = sprite;
+    
+    if (lockedDotSprite) {
+      earthObjRef.remove(lockedDotSprite);
+    }
+    const dotCanvas = createBrighterDotCanvas();
+    const dotTexture = new THREE.CanvasTexture(dotCanvas);
+    dotTexture.needsUpdate = true;
+    const dotMaterial = new THREE.SpriteMaterial({
+      map: dotTexture,
+      transparent: true,
+      opacity: 1.0,
+      depthTest: false
+    });
+    lockedDotSprite = new THREE.Sprite(dotMaterial);
+    lockedDotSprite.position.copy(position);
+    lockedDotSprite.scale.set(4 * cameraDistance / 200, 4 * cameraDistance / 200, 1);
+    
+    earthObjRef.add(lockedDotSprite);
  } else {
    if (hoverRingSprite) {
      earthObjRef.remove(hoverRingSprite);
@@ -406,6 +475,23 @@ export function showHoverRing(position, isLocked = false) {
  return sprite;
 }

+function createBrighterDotCanvas() {
+  const size = DOT_TEXTURE_SIZE * 2;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  const center = size / 2;
+  const gradient = ctx.createRadialGradient(center, center, 0, center, center, center);
+  gradient.addColorStop(0, 'rgba(255, 255, 200, 1)');
+  gradient.addColorStop(0.3, 'rgba(255, 220, 100, 0.9)');
+  gradient.addColorStop(0.7, 'rgba(255, 180, 50, 0.5)');
+  gradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, size, size);
+  return canvas;
+}
+
 export function hideHoverRings() {
  if (!earthObjRef) return;
  
@@ -416,20 +502,45 @@ export function hideHoverRings() {
 }

 export function hideLockedRing() {
-  if (!earthObjRef || !lockedRingSprite) return;
+  if (!earthObjRef) return;
+  if (lockedRingSprite) {
    earthObjRef.remove(lockedRingSprite);
    lockedRingSprite = null;
  }
+  if (lockedDotSprite) {
+    earthObjRef.remove(lockedDotSprite);
+    lockedDotSprite = null;
+  }
+}

 export function updateLockedRingPosition(position) {
+  const ringSize = SATELLITE_CONFIG.ringSize;
+  const camera = window.camera;
+  const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
  if (lockedRingSprite && position) {
    lockedRingSprite.position.copy(position);
+    const breathScale = 1 + Math.sin(breathingPhase) * SATELLITE_CONFIG.breathingScaleAmplitude;
+    lockedRingSprite.scale.set(ringSize * breathScale, ringSize * breathScale, 1);
+    const breathOpacity = SATELLITE_CONFIG.breathingOpacityMin + Math.sin(breathingPhase) * (SATELLITE_CONFIG.breathingOpacityMax - SATELLITE_CONFIG.breathingOpacityMin);
+    lockedRingSprite.material.opacity = breathOpacity;
+  }
+  if (lockedDotSprite && position) {
+    lockedDotSprite.position.copy(position);
+    const dotBreathScale = 1 + Math.sin(breathingPhase) * SATELLITE_CONFIG.dotBreathingScaleAmplitude;
+    lockedDotSprite.scale.set(4 * cameraDistance / 200 * dotBreathScale, 4 * cameraDistance / 200 * dotBreathScale, 1);
+    lockedDotSprite.material.opacity = SATELLITE_CONFIG.dotOpacityMin + Math.sin(breathingPhase) * (SATELLITE_CONFIG.dotOpacityMax - SATELLITE_CONFIG.dotOpacityMin);
  }
 }

 export function updateHoverRingPosition(position) {
+  const ringSize = SATELLITE_CONFIG.ringSize;
+  const camera = window.camera;
+  const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
+  const scale = ringSize;
  if (hoverRingSprite && position) {
    hoverRingSprite.position.copy(position);
+    hoverRingSprite.scale.set(scale, scale, 1);
+    console.log(`[Hover update] ringSize: ${ringSize}, camDist: ${cameraDistance}, scale: ${scale}`);
  }
 }

@@ -454,3 +565,91 @@ export function initSatelliteScene(scene, earth) {
  sceneRef = scene;
  earthObjRef = earth;
 }
+
+let predictedOrbitLine = null;
+
+function calculateOrbitalPeriod(meanMotion) {
+  return 86400 / meanMotion;
+}
+
+function calculatePredictedOrbit(satellite, periodSeconds, sampleInterval = 10) {
+  const points = [];
+  const samples = Math.ceil(periodSeconds / sampleInterval);
+  const now = new Date();
+  
+  // Full orbit: from now to now+period (complete circle forward)
+  for (let i = 0; i <= samples; i++) {
+    const time = new Date(now.getTime() + i * sampleInterval * 1000);
+    const pos = computeSatellitePosition(satellite, time);
+    if (pos) points.push(pos);
+  }
+  
+  // If we don't have enough points, use fallback orbit
+  if (points.length < samples * 0.5) {
+    points.length = 0;
+    const radius = CONFIG.earthRadius + 5;
+    const noradId = satellite.properties?.norad_cat_id || 0;
+    const inclination = satellite.properties?.inclination || 53;
+    const raan = satellite.properties?.raan || 0;
+    const meanAnomaly = satellite.properties?.mean_anomaly || 0;
+    
+    for (let i = 0; i <= samples; i++) {
+      const theta = (i / samples) * Math.PI * 2;
+      const phi = (inclination * Math.PI / 180);
+      const x = radius * Math.sin(phi) * Math.cos(theta + raan * Math.PI / 180);
+      const y = radius * Math.cos(phi);
+      const z = radius * Math.sin(phi) * Math.sin(theta + raan * Math.PI / 180);
+      points.push(new THREE.Vector3(x, y, z));
+    }
+  }
+  
+  return points;
+}
+
+export function showPredictedOrbit(satellite) {
+  hidePredictedOrbit();
+  
+  const props = satellite.properties;
+  const meanMotion = props?.mean_motion || 15;
+  const periodSeconds = calculateOrbitalPeriod(meanMotion);
+  
+  const points = calculatePredictedOrbit(satellite, periodSeconds);
+  if (points.length < 2) return;
+  
+  const positions = new Float32Array(points.length * 3);
+  const colors = new Float32Array(points.length * 3);
+  
+  for (let i = 0; i < points.length; i++) {
+    positions[i * 3] = points[i].x;
+    positions[i * 3 + 1] = points[i].y;
+    positions[i * 3 + 2] = points[i].z;
+    
+    const t = i / (points.length - 1);
+    colors[i * 3] = 1 - t * 0.4;
+    colors[i * 3 + 1] = 1 - t * 0.6;
+    colors[i * 3 + 2] = t;
+  }
+  
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  
+  const material = new THREE.LineBasicMaterial({
+    vertexColors: true,
+    transparent: true,
+    opacity: 0.8,
+    blending: THREE.AdditiveBlending
+  });
+  
+  predictedOrbitLine = new THREE.Line(geometry, material);
+  earthObjRef.add(predictedOrbitLine);
+}
+
+export function hidePredictedOrbit() {
+  if (predictedOrbitLine) {
+    earthObjRef.remove(predictedOrbitLine);
+    predictedOrbitLine.geometry.dispose();
+    predictedOrbitLine.material.dispose();
+    predictedOrbitLine = null;
+  }
+}
--- a/planet.sh
+++ b/planet.sh
@@ -25,13 +25,19 @@ start() {
    PYTHONPATH="$SCRIPT_DIR/backend" nohup python3 -m uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload > /tmp/planet_backend.log 2>&1 &
    BACKEND_PID=$!

-    sleep 3
-
-    if ! curl -s http://localhost:8000/health > /dev/null 2>&1; then
+    echo "    等待后端启动..."
+    for i in {1..10}; do
+        sleep 2
+        if curl -s http://localhost:8000/health > /dev/null 2>&1; then
+            echo -e "    ${GREEN}✅ 后端已就绪${NC}"
+            break
+        fi
+        if [ $i -eq 10 ]; then
            echo -e "${RED}❌ 后端启动失败${NC}"
            tail -10 /tmp/planet_backend.log
            exit 1
        fi
+    done

    echo -e "${BLUE}🌐 启动前端...${NC}"
    pkill -f "vite" 2>/dev/null || true