React Native中如何在3D地球仪上用路径展示国家？

解决方案 #

1. 核心问题分析 #

你当前的2D国家路径无法直接映射到3D球面，需要先将平面坐标转换为球面坐标，再生成可渲染的3D几何体，同时绑定点击交互逻辑。

2. 步骤实现 #

第一步：安装路径解析依赖

使用纯JS库解析SVG路径为点数组，方便后续转换：

npm install svg-path-to-polygons

第二步：编写坐标转换与几何体生成函数

在Model.js中添加工具函数，将平面路径坐标映射到球面，并生成3D形状：

import React from 'react';
import { Shape, ShapeBufferGeometry, MeshBasicMaterial, Mesh } from 'three';
import countriesData from './countriesData.json';
import parsePath from 'svg-path-to-polygons';

// 将平面坐标转换为球面坐标（半径略大于地球仪，避免遮挡）
const convertToSphereCoords = (x, y, radius = 1.01) => {
  // 假设平面坐标范围：X(0-1024)对应经度(-180°-180°)，Y(0-512)对应纬度(90°--90°)
  const lng = ((x / 1024) * 360 - 180) * (Math.PI / 180);
  const lat = ((512 - y) / 512) * 180 - 90;
  const latRad = lat * (Math.PI / 180);

  return {
    x: radius * Math.cos(latRad) * Math.cos(lng),
    y: radius * Math.sin(latRad),
    z: radius * Math.cos(latRad) * Math.sin(lng),
  };
};

// 解析SVG路径并生成球面Shape
const createCountryShape = (pathString) => {
  const points = parsePath(pathString, { tolerance: 2 }); // tolerance控制路径精度
  if (points.length === 0) return null;

  const shape = new Shape();
  // 初始化第一个点
  const firstPoint = convertToSphereCoords(points[0][0], points[0][1]);
  shape.moveTo(firstPoint.x, firstPoint.y, firstPoint.z);

  // 连接后续路径点
  for (let i = 1; i < points.length; i++) {
    const { x, y, z } = convertToSphereCoords(points[i][0], points[i][1]);
    shape.lineTo(x, y, z);
  }

  return shape;
};

第三步：渲染国家形状并绑定点击事件

修改Model组件，添加地球仪和国家形状渲染逻辑：

export default function Model() {
  return (
    <group dispose={null} scale={1}>
      {/* 地球仪球体 */}
      <mesh castShadow receiveShadow position={[0, 0, 0]} scale={[1, 1, 1]}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="#65A3FF" />
      </mesh>

      {/* 渲染所有国家区域 */}
      {countriesData.map((country) => {
        const shape = createCountryShape(country.path);
        if (!shape) return null;

        return (
          <mesh
            key={country.id}
            onClick={() => console.log('点击国家：', country.name)}
          >
            <ShapeBufferGeometry args={[shape]} />
            <meshBasicMaterial 
              color="#FF6B6B" 
              transparent 
              opacity={0.6} 
              side={2} // 启用双面渲染
            />
          </mesh>
        );
      })}
    </group>
  );
}

3. 细节优化与注意事项 #

• 坐标范围适配：如果你的平面路径坐标不是0-1024/0-512，需要修改convertToSphereCoords中的比例参数，匹配实际经纬度映射关系。
• 性能优化：若国家数量过多，可合并几何体减少绘制调用；调整tolerance参数平衡路径精度与性能。
• 层级问题：国家形状半径设为1.01（略大于地球仪的1），避免被地球仪材质遮挡。

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