突破平面限制：用three-globe构建动态国家多边形3D地球可视化

2026-02-04 04:04:13作者：明树来

引言：告别静态地图，拥抱沉浸式3D地理数据展示

你是否还在为平面地图无法直观展示地理数据的层次感而烦恼？是否想让你的数据可视化项目拥有令人惊叹的3D地球效果？本文将带你深入探索如何使用three-globe库创建动态国家多边形3D地球可视化，让你的地理数据展示提升到一个全新的水平。

读完本文，你将能够：

理解three-globe的核心概念和工作原理
掌握使用three-globe加载和渲染国家多边形数据的方法
学习如何自定义多边形的颜色、高度和交互效果
构建一个完整的、可交互的3D地球可视化应用

什么是three-globe？

three-globe是一个基于Three.js的WebGL Globe数据可视化库，它允许开发者在网页上创建高度定制化的3D地球模型，并在其上展示各种地理数据。作为开源项目，three-globe提供了丰富的API和示例，使开发者能够轻松实现复杂的地理数据可视化效果。

three-globe的主要特点包括：

基于WebGL技术，性能优异，支持大规模数据展示
提供丰富的图层类型，如点、线、面、热力图等
高度可定制的地球外观和数据展示样式
支持交互式控制，如旋转、缩放、平移等
与Three.js生态系统无缝集成，可利用其丰富的3D功能

准备工作：环境搭建与依赖引入

项目结构概览

three-globe项目的典型结构如下：

three-globe/
├── LICENSE
├── README.md
├── example/                 # 示例代码目录
│   ├── country-polygons/    # 国家多边形示例
│   │   ├── index.html       # 示例HTML文件
│   │   └── ne_110m_admin_0_countries.geojson  # 国家边界数据
│   └── img/                 # 地球纹理图片
├── package.json
├── src/                     # 源代码目录
└── ...

引入依赖

在HTML文件中，我们需要引入three-globe和Three.js等依赖。为确保国内访问速度，我们使用国内CDN：

<script type="importmap">{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/": "https://cdn.jsdelivr.net/npm/three@0.160.0/"
}}</script>

<script type="module">
  import ThreeGlobe from 'https://cdn.jsdelivr.net/npm/three-globe@2.31.0/+esm';
  import * as THREE from 'three';
  import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
</script>

实战教程：构建国家多边形3D地球可视化

步骤1：创建基本HTML结构

首先，我们创建一个基本的HTML结构，包含一个用于显示地球的容器：

<!DOCTYPE html>
<html>
<head>
  <title>3D国家多边形地球可视化</title>
  <style>
    body { margin: 0; }
    #globeViz { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="globeViz"></div>
  <!-- 后续脚本将在这里添加 -->
</body>
</html>

步骤2：初始化Three.js和three-globe

接下来，我们需要初始化Three.js的场景、相机、渲染器，以及three-globe的地球实例：

// 创建地球实例
const Globe = new ThreeGlobe()
  .globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg');

// 设置渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
document.getElementById('globeViz').appendChild(renderer.domElement);

// 设置场景
const scene = new THREE.Scene();
scene.add(Globe);
scene.add(new THREE.AmbientLight(0xcccccc, Math.PI));
scene.add(new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI));

// 设置相机
const camera = new THREE.PerspectiveCamera();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.position.z = 500;

// 添加相机控制
const tbControls = new TrackballControls(camera, renderer.domElement);
tbControls.minDistance = 101;
tbControls.rotateSpeed = 5;
tbControls.zoomSpeed = 0.8;

步骤3：加载和处理国家边界数据

three-globe支持GeoJSON格式的地理数据。我们将加载一个包含国家边界的GeoJSON文件，并对其进行简单处理：

fetch('https://cdn.jsdelivr.net/npm/three-globe/example/country-polygons/ne_110m_admin_0_countries.geojson')
  .then(res => res.json())
  .then(countries => {
    // 过滤掉南极洲
    const filteredCountries = countries.features.filter(d => d.properties.ISO_A2 !== 'AQ');
    
    // 将数据添加到地球
    Globe.polygonsData(filteredCountries);
    
    // 启动渲染循环
    animate();
  });

步骤4：自定义多边形样式

three-globe提供了丰富的API来自定义多边形的外观：

Globe
  // 设置多边形顶部颜色
  .polygonCapColor(() => 'rgba(200, 0, 0, 0.7)')
  // 设置多边形侧面颜色
  .polygonSideColor(() => 'rgba(0, 200, 0, 0.1)')
  // 设置多边形边框颜色
  .polygonStrokeColor(() => '#111')
  // 设置多边形边框宽度
  .polygonStrokeWidth(0.5)
  // 设置多边形高度
  .polygonAltitude(0.05);

步骤5：添加动画效果

为了使可视化更加生动，我们可以添加一些动画效果：

// 随机改变多边形高度的动画
setTimeout(() => {
  // 缓慢改变多边形高度
  let altitudeFactor = 0;
  setInterval(() => {
    altitudeFactor = (altitudeFactor + 0.01) % 1;
    Globe.polygonAltitude(d => Math.sin(altitudeFactor * Math.PI * 2 + d.properties.ADM0_A3) * 0.1);
  }, 50);
}, 2000);

步骤6：实现渲染循环

最后，我们需要实现一个渲染循环，以持续更新和渲染场景：

function animate() {
  requestAnimationFrame(animate);
  tbControls.update();
  renderer.render(scene, camera);
}

完整代码示例

下面是完整的HTML文件代码：

<!DOCTYPE html>
<html>
<head>
  <title>3D国家多边形地球可视化</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #globeViz { width: 100vw; height: 100vh; }
  </style>
  <script type="importmap">{ "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/": "https://cdn.jsdelivr.net/npm/three@0.160.0/"
  }}</script>
</head>
<body>
  <div id="globeViz"></div>

  <script type="module">
    import ThreeGlobe from 'https://cdn.jsdelivr.net/npm/three-globe@2.31.0/+esm';
    import * as THREE from 'three';
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';

    // 创建地球实例
    const Globe = new ThreeGlobe()
      .globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
      .polygonCapColor(() => 'rgba(200, 0, 0, 0.7)')
      .polygonSideColor(() => 'rgba(0, 200, 0, 0.1)')
      .polygonStrokeColor(() => '#111')
      .polygonStrokeWidth(0.5)
      .polygonAltitude(0.05);

    // 设置渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
    document.getElementById('globeViz').appendChild(renderer.domElement);

    // 设置场景
    const scene = new THREE.Scene();
    scene.add(Globe);
    scene.add(new THREE.AmbientLight(0xcccccc, Math.PI));
    scene.add(new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI));

    // 设置相机
    const camera = new THREE.PerspectiveCamera();
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    camera.position.z = 500;

    // 添加相机控制
    const tbControls = new TrackballControls(camera, renderer.domElement);
    tbControls.minDistance = 101;
    tbControls.rotateSpeed = 5;
    tbControls.zoomSpeed = 0.8;

    // 加载国家数据
    fetch('https://cdn.jsdelivr.net/npm/three-globe/example/country-polygons/ne_110m_admin_0_countries.geojson')
      .then(res => res.json())
      .then(countries => {
        // 过滤掉南极洲
        const filteredCountries = countries.features.filter(d => d.properties.ISO_A2 !== 'AQ');
        Globe.polygonsData(filteredCountries);
        
        // 添加动画效果
        setTimeout(() => {
          let altitudeFactor = 0;
          setInterval(() => {
            altitudeFactor = (altitudeFactor + 0.01) % 1;
            Globe.polygonAltitude(d => Math.sin(altitudeFactor * Math.PI * 2 + d.properties.ADM0_A3.charCodeAt(0)) * 0.1);
          }, 50);
        }, 2000);
        
        // 启动渲染循环
        animate();
      });

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      tbControls.update();
      renderer.render(scene, camera);
    }

    // 窗口大小调整处理
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

高级技巧：自定义与优化

基于数据的样式映射

three-globe允许我们根据数据属性动态设置多边形样式。例如，我们可以根据国家人口设置不同的颜色：

Globe.polygonCapColor(d => {
  const population = d.properties.POP_EST;
  const colorScale = [
    { pop: 0, color: 'rgba(255, 255, 255, 0.7)' },
    { pop: 1e7, color: 'rgba(255, 200, 200, 0.7)' },
    { pop: 1e8, color: 'rgba(255, 100, 100, 0.7)' },
    { pop: 1e9, color: 'rgba(255, 0, 0, 0.7)' }
  ];
  
  // 找到对应的颜色
  for (let i = colorScale.length - 1; i > 0; i--) {
    if (population >= colorScale[i].pop) {
      return colorScale[i].color;
    }
  }
  return colorScale[0].color;
});

性能优化

当处理大量多边形数据时，我们可以采取以下优化措施：

使用简化的GeoJSON数据（如示例中的ne_110m_admin_0_countries.geojson就是低分辨率数据）
限制同时显示的多边形数量
使用LOD（Level of Detail）技术，根据相机距离调整多边形复杂度

// 根据相机距离调整多边形高度和细节
function updatePolygonsBasedOnCamera() {
  const distance = camera.position.length();
  const detailLevel = Math.max(1, Math.min(5, Math.floor(distance / 100)));
  
  Globe
    .polygonAltitude(distance < 300 ? 0.1 : 0.05)
    .polygonResolution(detailLevel);
}

// 在渲染循环中调用
function animate() {
  requestAnimationFrame(animate);
  updatePolygonsBasedOnCamera();
  tbControls.update();
  renderer.render(scene, camera);
}

交互增强

我们可以为多边形添加交互效果，如鼠标悬停高亮：

// 存储当前选中的多边形
let selectedObject = null;

// 添加鼠标事件监听
renderer.domElement.addEventListener('mousemove', (e) => {
  // 计算鼠标在标准化设备坐标中的位置
  const mouse = new THREE.Vector2();
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  
  // 创建射线投射器
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  
  // 检测与多边形的交集
  const intersects = raycaster.intersectObjects(Globe.polygonObjects);
  
  // 恢复之前选中的多边形颜色
  if (selectedObject && (!intersects.length || intersects[0].object !== selectedObject)) {
    selectedObject.material.color.set('rgba(200, 0, 0, 0.7)');
    selectedObject = null;
  }
  
  // 高亮新选中的多边形
  if (intersects.length) {
    selectedObject = intersects[0].object;
    selectedObject.material.color.set('rgba(255, 255, 0, 0.9)');
  }
});

常见问题与解决方案

Q1: 地球显示空白或不完整怎么办？

A1: 这通常是由于资源加载问题或容器尺寸设置不当导致的：

检查地球纹理图片URL是否正确
确保容器元素有明确的宽度和高度
检查浏览器控制台是否有资源加载错误

Q2: 多边形数据加载缓慢怎么办？

A2: 可以尝试以下优化：

使用简化版的GeoJSON数据
实现数据分块加载
添加加载进度指示器
使用Web Worker在后台处理数据

// 添加加载指示器
const loader = document.createElement('div');
loader.textContent = '加载中...';
loader.style.position = 'absolute';
loader.style.top = '50%';
loader.style.left = '50%';
loader.style.transform = 'translate(-50%, -50%)';
document.body.appendChild(loader);

// 加载完成后隐藏指示器
fetch(...)
  .then(...)
  .then(countries => {
    // 处理数据
    loader.remove();
  });

Q3: 如何在React/Vue等框架中使用three-globe？

A3: three-globe可以与现代前端框架集成。以React为例，可以使用refs来获取DOM元素，并在useEffect钩子中初始化three-globe：

import React, { useRef, useEffect } from 'react';
import ThreeGlobe from 'three-globe';
import * as THREE from 'three';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';

function GlobeComponent() {
  const containerRef = useRef(null);
  const globeRef = useRef(null);
  
  useEffect(() => {
    // 初始化代码（与前面类似）
    const Globe = new ThreeGlobe();
    globeRef.current = Globe;
    
    // ... 其他初始化代码 ...
    
    return () => {
      // 清理代码
      if (containerRef.current && containerRef.current.contains(renderer.domElement)) {
        containerRef.current.removeChild(renderer.domElement);
      }
    };
  }, []);
  
  return <div ref={containerRef} style={{ width: '100%', height: '100%' }}></div>;
}

export default GlobeComponent;