基于Three.js(React模板)实现空间站按经纬度定位地球模型并周期旋转

核心思路 #

经纬度属于球面坐标系，需要先转换成Three.js使用的笛卡尔坐标系（x/y/z），再将空间站模型定位到转换后的坐标点。后续只需定时更新经纬度并重复转换逻辑，就能实现绕地球旋转的效果。

步骤1：实现经纬度转笛卡尔坐标的工具函数 #

假设地球模型中心位于Three.js场景原点（(0,0,0)），且地球半径为earthRadius（根据你模型的实际缩放值调整，比如设为100）。转换函数逻辑如下：

// 经纬度转笛卡尔坐标
function latLongToCartesian(lat, lon, earthRadius) {
  // 将角度转为弧度
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lon + 180) * (Math.PI / 180);

  const x = -(earthRadius * Math.sin(phi) * Math.cos(theta));
  const z = earthRadius * Math.sin(phi) * Math.sin(theta);
  const y = earthRadius * Math.cos(phi);

  return new THREE.Vector3(x, y, z);
}

说明：Three.js的Y轴垂直向上，这里对纬度做90度偏移处理，确保纬度0对应赤道位置。

步骤2：加载模型并实现定位与动态更新 #

在React环境中，用useRef保存模型实例，方便后续操作；通过定时器实现每秒更新位置：

import { useRef, useEffect } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

function ThreeScene() {
  const sceneRef = useRef(new THREE.Scene());
  const earthRef = useRef(null);
  const spaceStationRef = useRef(null);
  const earthRadius = 100; // 替换为你地球模型的实际半径

  useEffect(() => {
    // 加载地球模型
    const earthLoader = new GLTFLoader();
    earthLoader.load("path/to/earth-model", function (gltf) {
      earthRef.current = gltf.scene;
      // 调整地球模型的缩放和位置（按需修改）
      earthRef.current.scale.set(earthRadius, earthRadius, earthRadius);
      earthRef.current.position.set(0, 0, 0);
      sceneRef.current.add(earthRef.current);
    });

    // 加载空间站模型并初始定位
    const stationLoader = new GLTFLoader();
    stationLoader.load("path/to/station-model", function (gltf) {
      spaceStationRef.current = gltf.scene;
      // 初始定位到示例经纬度
      const initialPos = latLongToCartesian(46.524648101056, 45.926013877299, earthRadius);
      spaceStationRef.current.position.copy(initialPos);
      // 可选：让空间站始终朝向地球中心
      spaceStationRef.current.lookAt(new THREE.Vector3(0, 0, 0));
      sceneRef.current.add(spaceStationRef.current);
    });

    // 每秒更新空间站位置（示例：经度递增1度实现旋转）
    const interval = setInterval(() => {
      if (!spaceStationRef.current) return;
      const newLon = (45.926013877299 + 1) % 360;
      const newPos = latLongToCartesian(46.524648101056, newLon, earthRadius);
      spaceStationRef.current.position.copy(newPos);
      spaceStationRef.current.lookAt(new THREE.Vector3(0, 0, 0));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  // 补充相机、渲染器初始化逻辑（需挂载到DOM容器）
  return <div ref={/* 渲染器DOM容器引用 */}></div>;
}

export default ThreeScene;

关键注意事项 #

• 地球模型位置偏移：如果地球模型中心不在原点，需在转换坐标后加上地球的偏移量，比如newPos.add(earthRef.current.position)。
• 缩放匹配：确保地球模型的缩放值和earthRadius一致，否则坐标计算会出现偏差。
• 姿态控制：lookAt方法能让空间站始终朝向地球中心，避免旋转时姿态错乱。
• 性能优化：若经纬度更新频繁，建议用requestAnimationFrame替代setInterval，保证和Three.js渲染帧同步。

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter