如何用react-three-fiber/react-three-drei在3D地球添加城市坐标点？

你需要把城市的经纬度坐标转换成地球表面的3D空间坐标，才能让每个点对应到正确的位置。以下是具体实现步骤：

1. 编写经纬度转3D坐标的工具函数 #

地球是球体，基于你的地球半径（2.75），用球面坐标系转笛卡尔坐标系的公式实现转换：

// 输入纬度lat、经度lon，返回对应的3D坐标数组[x,y,z]
const latLonToVector3 = (lat, lon, radius = 2.75) => {
  // 将度数转为弧度（Three.js三角函数使用弧度）
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lon + 180) * (Math.PI / 180);
  
  // 计算笛卡尔坐标
  const x = -(radius * Math.sin(phi) * Math.cos(theta));
  const y = radius * Math.cos(phi);
  const z = radius * Math.sin(phi) * Math.sin(theta);
  
  return [x, y, z];
};

注：该公式适配常规经纬度格式（纬度范围-90°到90°，经度-180°到180°），若你的坐标格式特殊可微调参数。

2. 循环渲染所有城市坐标点 #

假设你有一组城市数据数组：

const cities = [
  { name: "北京", lat: 39.9042, lon: 116.4074 },
  { name: "纽约", lat: 40.7128, lon: -74.0060 },
  // 更多城市数据...
];

在你的地球组件中，循环调用转换函数生成每个点的位置：

<mesh>
  <sphereGeometry args={[2.75, 100, 100]} />
  <meshPhongMaterial specularMap={earthSpecularMap} />
  <meshStandardMaterial map={earthDiffuseMap} normalMap={earthNormalMap} />
</mesh>

{/* 渲染所有城市坐标点 */}
{cities.map((city, index) => {
  const position = latLonToVector3(city.lat, city.lon);
  return (
    <mesh key={index} position={position}>
      <sphereGeometry args={[0.05, 10, 10]} />
      <meshBasicMaterial color="red" />
      {/* 可选：添加城市名称标签（需安装@react-three/drei库） */}
      {/* <Text position={[0, 0.1, 0]} color="white" fontSize={0.1} lookAt={camera.position}>
        {city.name}
      </Text> */}
    </mesh>
  );
})}

3. 关键注意事项 #

• 给每个点添加唯一的key属性，避免React渲染警告
• 可调整sphereGeometry的第一个参数（半径）来改变坐标点的大小
• 若要添加城市名称标签，需安装@react-three/drei库，并用其Text组件，同时设置lookAt让标签始终面向相机

内容的提问来源于stack exchange，提问作者Rav