星系可视化 - 带有分层卫星的行星轨道

太阳系可视化

功能概述

本示例创建了一个太阳系可视化，行星围绕中心恒星运行。每颗行星都是一个带有自己轨道路径的节点，系统演示了动画、层级关系（卫星绕行星运行）以及图形式的空间定位。

核心特性实现

轨道力学

const updatePlanetPositions = () => {
    const time = Date.now() * 0.0001;

    planets.forEach(planet => {
        const angle = time / planet.orbitalPeriod;
        const x = sunX + Math.cos(angle) * planet.distance;
        const y = sunY + Math.sin(angle) * planet.distance;

        graphInstance.updateNode(planet.id, { x, y });
    });

    requestAnimationFrame(updatePlanetPositions);
};

卫星层级

const createMoonSystem = (planetId: string, moons: Moon[]) => {
    const moonNodes = moons.map(moon => ({
        id: `${planetId}-${moon.name}`,
        text: moon.name,
        data: { parentPlanet: planetId, distance: moon.distance }
    }));

    // 相对于行星定位卫星
    moonNodes.forEach(moon => {
        const planet = graphInstance.getNodeById(moon.data.parentPlanet);
        moon.x = planet.x + moon.data.distance;
        moon.y = planet.y;
    });

    return moonNodes;
};

创意使用场景

天文教育：教授太阳系结构。

轨道力学：演示引力关系。

虚构宇宙：为游戏/故事创建自定义星系。

卫星跟踪：可视化人造卫星轨道。

数据星座：以宇宙模式排列数据点。