一行代码，构建你的 3D 地球可视化

在 Web 可视化开发中，如果你曾尝试使用 Three.js 从零构建一颗交互式地球，你一定体会过其中的复杂：从贴图加载、坐标投影，到交互控制、性能优化，每一个细节都可能耗费大量精力。

今天推荐一款高效、简洁的 WebGL 可视化工具 —— globe.gl，它基于 Three.js 封装，专为 地球数据可视化 场景设计，极大降低了开发门槛。

地址：https://globe.gl/ (opens in a new tab)

核心特性一览

globe.gl 提供了如下优势：

开箱即用：内置地球纹理、光照、交互控制器。
极简 API：通过链式调用绑定 GeoJSON、点、弧线、标签等。
高度可定制：可直接访问底层 Three.js 实例，自由拓展。
轻量高性能：专注展示，无冗余依赖，适配现代浏览器。

案例展示

只需几行代码，即可快速搭建一个炫酷的 3D 地球可视化页面。下面是几个典型示例：

散点图

用于展示全球散布的数据点，比如用户分布、地震监测点、天气站等。

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<body>
  <div id="globeViz"></div>
 
  <script>
    // Gen random data
    const N = 300;
    const gData = [...Array(N).keys()].map(() => ({
      lat: (Math.random() - 0.5) * 180,
      lng: (Math.random() - 0.5) * 360,
      size: Math.random() / 3,
      color: ["red", "white", "blue", "green"][Math.round(Math.random() * 3)],
    }));
 
    new Globe(document.getElementById("globeViz"))
      .globeImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg")
      .pointsData(gData)
      .pointAltitude("size")
      .pointColor("color");
  </script>
</body>

飞线动画

展示全球两个地理点之间的连接关系，可用于航班轨迹、供应链、人口迁徙等可视化场景。

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<body>
  <div id="globeViz"></div>
  <script>
    // Gen random data
    const N = 20;
    const arcsData = [...Array(N).keys()].map(() => ({
      startLat: (Math.random() - 0.5) * 180,
      startLng: (Math.random() - 0.5) * 360,
      endLat: (Math.random() - 0.5) * 180,
      endLng: (Math.random() - 0.5) * 360,
      color: [
        ["red", "white", "blue", "green"][Math.round(Math.random() * 3)],
        ["red", "white", "blue", "green"][Math.round(Math.random() * 3)],
      ],
    }));
 
    new Globe(document.getElementById("globeViz"))
      .globeImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg")
      .arcsData(arcsData)
      .arcColor("color")
      .arcDashLength(() => Math.random())
      .arcDashGap(() => Math.random())
      .arcDashAnimateTime(() => Math.random() * 4000 + 500);
  </script>
</body>

脉冲遮罩圈

用于表示一个中心点的范围辐射或周期性事件，如信号扫描、报警区域等。

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<body>
  <div id="globeViz"></div>
 
  <script>
    const shieldRing = { lat: 90, lng: 0 };
 
    const globe = new Globe(document.getElementById("globeViz"))
      .globeImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg")
      .ringsData([shieldRing])
      .ringAltitude(0.25)
      .ringColor(() => "lightblue")
      .ringMaxRadius(180)
      .ringPropagationSpeed(20)
      .ringRepeatPeriod(200);
  </script>
</body>

支持的可视化类型

globe.gl 支持多种地理数据绑定方式，几乎覆盖所有常见的地球类可视化需求：

类型	描述说明
`pointsData`	地球表面散点图，如人口、城市分布等
`arcsData`	两地之间的连接线，常用于航线、通信等
`hexPolygonsData`	六边形热力图，可视化分布密度
`labelsData`	地图上的文字标签
`pathsData`	可绘制路径线、动态飞线等

每种类型均支持自定义属性绑定，可灵活控制颜色、高度、大小、透明度及动画行为。

拓展能力与定制化开发

globe.gl 的本质是一个 Three.js 的封装器，拥有以下能力：

访问 world.scene() 获取 Three.js 场景对象
支持 .onClick()、.onHover() 添加交互
可挂载自定义 THREE.Object3D 组件（如贴图、光锥、模型）

应用场景示例：

加载 glTF 模型
添加体积光或水波纹
实现粒子系统等动画效果

总结

如果你正在开发一款全球视野的数据展示系统，或只是想快速构建一个交互式地球场景用于展示或演示，globe.gl 无疑是当前最轻量、最灵活、最易用的解决方案之一。

无须深入理解复杂的三维数学知识，也能快速实现现代感十足的地球交互效果，真正做到“一行代码点亮世界”。

Force Glslsndbox