Three.js中setFromSphericalCoords用法及经纬度转笛卡尔坐标问题

1. setFromSphericalCoords() 工作原理 #

Three.js中的Spherical球坐标由三个参数定义：

• r：球半径（从原点到目标点的直线距离）
• phi：极角，从**Y轴正方向（北极）**向下测量的角度（单位：弧度）
• theta：方位角，绕Y轴旋转的角度（单位：弧度，对应地理经度）

setFromSphericalCoords(r, phi, theta)方法会自动将球坐标转换为笛卡尔坐标(x,y,z)，内部转换逻辑等价于：

x = r * Math.sin(phi) * Math.cos(theta);
y = r * Math.cos(phi);
z = r * Math.sin(phi) * Math.sin(theta);

2. 坐标转换异常的核心原因 #

你遇到的瞬移、穿入地球问题，是三个关键错误导致的：

• 角度未转弧度：Math.cos()/Math.sin()仅接受弧度值，直接传入地理经纬度（角度）会导致计算结果完全失真，引发坐标跳变。
• 未叠加地球半径：API返回的ISS高度是到地面的距离，若仅用该值作为球半径r，ISS位置会处于地球模型内部（因为地球模型本身有半径）。
• 地理纬度与球坐标极角不匹配：地理纬度从赤道平面测量，而Three.js球坐标的phi从Y轴正方向（北极）测量，两者需要转换。

3. 正确的坐标转换方式 #

方式一：使用setFromSphericalCoords()（推荐） #

// 定义地球半径（需与3D模型尺寸单位一致，示例为米）
const EARTH_RADIUS = 6371000;

// 从API获取的ISS数据：lat（纬度，角度）、lon（经度，角度）、alt（高度，米）
const { lat, lon, alt } = issData;

// 转换为弧度
const latRad = THREE.MathUtils.degToRad(lat);
const lonRad = THREE.MathUtils.degToRad(lon);

// 计算球坐标参数
const r = EARTH_RADIUS + alt;
const phi = Math.PI / 2 - latRad; // 地理纬度转极角

// 设置ISS位置
issMesh.position.setFromSphericalCoords(r, phi, lonRad);

方式二：手动计算笛卡尔坐标 #

若需手动实现，修正后的公式需匹配Three.js坐标系（Y轴向上）：

const EARTH_RADIUS = 6371000;
const { lat, lon, alt } = issData;

const latRad = THREE.MathUtils.degToRad(lat);
const lonRad = THREE.MathUtils.degToRad(lon);
const r = EARTH_RADIUS + alt;

const x = r * Math.cos(latRad) * Math.cos(lonRad);
const y = r * Math.sin(latRad);
const z = r * Math.cos(latRad) * Math.sin(lonRad);

issMesh.position.set(x, y, z);

4. 笛卡尔坐标与setFromCartesianCoords()说明 #

• 笛卡尔坐标(x,y,z)是Three.js中物体位置的直接存储形式，所有物体的position属性均为笛卡尔坐标。
• setFromCartesianCoords(x, y, z)本质是直接为向量赋值，与position.set(x, y, z)功能完全一致，用于将已知的三维直角坐标直接应用到物体位置上。
• 球坐标适合描述绕原点旋转的位置（如ISS绕地球），笛卡尔坐标更适合直接定位、平移操作。

5. 优化建议 #

• 单位统一：确保API返回的高度单位（如千米）与地球模型单位（如米）一致，避免缩放错误。
• 平滑过渡：若API数据更新间隔较长，使用THREE.MathUtils.lerp或动画库（如Tween.js）对新旧坐标进行插值，实现ISS位置的平滑移动，避免瞬移。

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