Flutter实现可交互3D定制地球仪的最优方案咨询

一、优先选择：Three.js 轻量封装方案 #

Three.js是WebGL的成熟封装库，通过CDN引入无需本地打包，体积轻量化（gzip后约100KB），能快速实现需求且维护成本低，完全适配移动端触摸交互。

核心实现步骤 #

1. 基础白色球体：创建低多边形球体（平衡细节与性能），使用纯色基础材质。
2. 国家边界描边：加载简化后的国家GeoJSON数据，将经纬度坐标转换为3D球体坐标，通过LineSegments绘制边界线条。
3. 已访问国家填充：对目标国家的GeoJSON坐标构建面几何体，使用半透明材质标记，叠加在球体上。
4. 旋转交互：监听鼠标/触摸事件，通过修改球体旋转属性实现拖拽旋转，同时适配移动端触摸手势。

示例代码 #

// 引入Three.js（CDN方式，无需本地安装）
import * as THREE from 'https://cdn.skypack.dev/three@0.150.0';

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建白色基础球体（32分段足够平衡细节与性能）
const globeGeometry = new THREE.SphereGeometry(5, 32, 32);
const globeMaterial = new THREE.MeshBasicMaterial({ color: '#ffffff' });
const globe = new THREE.Mesh(globeGeometry, globeMaterial);
scene.add(globe);

// 加载简化后的国家边界数据（建议用Mapshaper工具压缩GeoJSON）
fetch('countries-simplified.geojson')
  .then(res => res.json())
  .then(data => {
    // 绘制国家边界描边
    const lineMaterial = new THREE.LineBasicMaterial({ color: '#333333', linewidth: 1 });
    data.features.forEach(feature => {
      feature.geometry.coordinates.forEach(polygon => {
        const linePoints = [];
        polygon.forEach(([lon, lat]) => {
          // 经纬度转3D球体坐标
          const phi = (90 - lat) * Math.PI / 180;
          const theta = (lon + 180) * Math.PI / 180;
          const x = -5 * Math.sin(phi) * Math.cos(theta);
          const y = 5 * Math.cos(phi);
          const z = 5 * Math.sin(phi) * Math.sin(theta);
          linePoints.push(new THREE.Vector3(x, y, z));
        });
        const lineGeo = new THREE.BufferGeometry().setFromPoints(linePoints);
        globe.add(new THREE.LineSegments(lineGeo, lineMaterial));
      });
    });

    // 标记已访问国家（示例：中国、美国）
    const visitedCountries = ['China', 'United States'];
    const visitedMaterial = new THREE.MeshBasicMaterial({ color: '#4CAF50', transparent: true, opacity: 0.6 });
    data.features.forEach(feature => {
      if (visitedCountries.includes(feature.properties.name)) {
        feature.geometry.coordinates.forEach(polygon => {
          const vertices = [];
          polygon.forEach(([lon, lat]) => {
            const phi = (90 - lat) * Math.PI / 180;
            const theta = (lon + 180) * Math.PI / 180;
            const x = -5 * Math.sin(phi) * Math.cos(theta);
            const y = 5 * Math.cos(phi);
            const z = 5 * Math.sin(phi) * Math.sin(theta);
            vertices.push(x, y, z);
          });
          const meshGeo = new THREE.BufferGeometry();
          meshGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
          meshGeo.computeVertexNormals();
          globe.add(new THREE.Mesh(meshGeo, visitedMaterial));
        });
      }
    });
  });

// 旋转交互逻辑（支持鼠标/触摸）
let isRotating = false;
let lastPos = { x: 0, y: 0 };

// 鼠标事件
document.addEventListener('mousedown', e => {
  isRotating = true;
  lastPos = { x: e.clientX, y: e.clientY };
});
document.addEventListener('mousemove', e => {
  if (!isRotating) return;
  globe.rotation.y += (e.clientX - lastPos.x) * 0.005;
  globe.rotation.x += (e.clientY - lastPos.y) * 0.005;
  lastPos = { x: e.clientX, y: e.clientY };
});
document.addEventListener('mouseup', () => isRotating = false);

// 触摸事件（移动端适配）
document.addEventListener('touchstart', e => {
  isRotating = true;
  lastPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});
document.addEventListener('touchmove', e => {
  if (!isRotating) return;
  globe.rotation.y += (e.touches[0].clientX - lastPos.x) * 0.005;
  globe.rotation.x += (e.touches[0].clientY - lastPos.y) * 0.005;
  lastPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});
document.addEventListener('touchend', () => isRotating = false);

// 渲染循环
camera.position.z = 12;
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

二、极致轻量化：原生WebGL方案 #

如果对包体积有极致要求（比如总资源控制在50KB内），可以手写原生WebGL代码，但开发周期长、调试难度大，适合有WebGL基础的开发者。

核心要点 #

• 手动编写顶点着色器与片元着色器，处理经纬度到3D坐标的转换、颜色渲染。
• 自行构建边界线条和填充面的顶点缓冲区，管理GPU内存。
• 手动实现触摸/鼠标旋转的矩阵变换逻辑，避免冗余计算。

三、移动端关键优化 #

• 压缩GeoJSON：用Mapshaper工具简化国家边界坐标，减少顶点数量，降低内存占用。
• 性能动态适配：根据设备性能开关抗锯齿，低性能设备关闭抗锯齿以提升帧率。
• 交互体验优化：添加惯性旋转效果，限制旋转角度避免地球仪翻转。
• 内存管理：及时销毁不再使用的几何体、材质，防止内存泄漏。

方案对比 #

Unity Widget会导致App包体积剧增，完全不符合轻量化需求，直接排除。

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