企业官网建设流程全解析

一张会说数据的三维地球，从零搭建只需半小时：three-globe 完整上手指南

【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe

做数据看板最尴尬的时刻，是用户盯着屏幕问："你这个 2D 地图，能转起来看吗？"当数据点从几十个涨到几千、上万个，二维地图上的点开始互相遮挡、连线乱成一团，传统图表终于说不动话了。今天我们要动手搭建的，正是解决这个问题的工具——three-globe，一个基于 ThreeJS 的 WebGL 开源库，专门用于3D 地球可视化，让你把全球数据铺在一个可以拖拽、缩放、旋转的立体球上。

它和普通地图库到底差在哪

一句话认识它：three-globe 是跑在浏览器里的一个可复用 ThreeJS 3D 对象，你把经纬度数据"喂"给它，它就在球面上帮你长出点、弧线、区域、热力、六边形聚合等十余种图层。和 ECharts、Leaflet 这类 2D 方案相比，它真正的优势是三维空间交互和百万级数据点渲染。它不自带控制器，却也因此保持轻量，天然嵌入任何 ThreeJS 场景。适合物流大屏、气象监测、金融网络这类"数据天生带经纬度"的场景。

小结：它是一个"地球容器"，你只管给数据，剩下的空间感它来给。

三步跑起来：引库、建球、挂图层

这一节解决"最快多久能看到一个转起来的地球"。答案是十分钟以内。先安装：

npm install three-globe

如果你只想快速验证，直接打开项目里现成的example/basic/index.html，浏览器加载就是完整示例。自己从零写，最小代码是这样：

import ThreeGlobe from 'three-globe'; import * as THREE from 'three'; // 1. 建一个地球：选纹理 + 挂数据 const globe = new ThreeGlobe() .globeImageUrl('example/img/earth-day.jpg') // 白天地球纹理 .bumpImageUrl('example/img/earth-topology.png') // 地形凹凸贴图，让山脉隆起 .pointsData([ { lat: 31.23, lng: 121.47 }, // 上海 { lat: 40.71, lng: -74.01 }, // 纽约 ]); // 2. 把地球放进 ThreeJS 标准三件套：场景、相机、渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(); camera.position.z = 500; // 把相机拉远，否则你会被地球"包住" scene.add(globe); scene.add(new THREE.AmbientLight(0xcccccc, Math.PI)); // 环境光 scene.add(new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI)); // 平行光 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 3. 循环渲染 (function animate() { renderer.render(scene, camera); requestAnimationFrame(animate); })();

注意两点：pointsData是"数据绑定"的入口——绑定就是把经纬度数组告诉地球"怎么画"，之后每个点、每条弧都从这份数据里取字段；而光照和相机距离这两行，是新手最容易漏掉的"隐形开关"。

这就是 three-globe 的预览效果——数据点与连线在立体球面上铺开，观感远超平面地图。

拆解三个最能打的图层能力

这一节解决"数据到了地球手里，能长成什么样子"。我们从十几种图层里挑三个最常用的。

点图层：把坐标变成会说话的数据柱

它解决"数据在哪、量多大"的问题。每个点默认渲染成一个从地表升起的圆柱体，高度、颜色、粗细都能绑定到数据字段：

globe.pointsData(cities) // cities: [{lat, lng, orders, level}] .pointAltitude('orders') // 高度=订单量，数据自动映射 .pointColor('level') // 颜色=城市等级 .pointRadius(0.4) // 圆柱粗细 .pointsMerge(true); // 合并几何体，渲染更快

弧线图层：让"连接关系"在三维里飞起来

平面地图画连线，一多就变成毛线团；弧线图层让每条连接拱起离开球面，路径清晰可辨，还能做虚线流动动画：

globe.arcsData(routes) // routes: [{startLat, startLng, endLat, endLng}] .arcColor(['#ffa726', '#1565c0']) // 支持起点到终点的颜色渐变 .arcDashLength(0.4) // 虚线段长度 .arcDashAnimateTime(1200) // 让虚线沿路径流动，动感拉满 .arcsTransitionDuration(800); // 数据更新时的平滑过渡时长

配合夜晚纹理，城市灯光 + 流动航线就是经典"全球网络大屏"效果：

夜晚纹理让"灯亮的地方就是人口与经济活动"一目了然，是弧线类场景的绝配。

多边形图层：给每个国家一块"数据皮肤"

它解决"区域维度"的展示。直接喂 GeoJSON 就能给国家边界上色、抬升：

globe.polygonsData(countries.features) // 标准 GeoJSON Feature .polygonCapColor(d => d.properties.gdp > 500 ? '#e53935' : '#1e88e5') .polygonAltitude(0.05) // 国家"拔地而起"的高度 .polygonStrokeColor(() => '#111'); // 边界描边

小结：点解决"在哪、多大"，弧解决"怎么连"，多边形解决"区域强弱"，三者叠加就是完整的数据叙事。

实战演练：搭一个全球订单配送看板

现在我们把能力串起来。假设你是一家跨境物流公司的前端，需求是：一个页面同时看清订单分布、仓库到目的地的配送干线、以及各区域订单热度。这是很典型的真实业务场景。

第一步，准备数据。订单列表按城市聚合得到城市数组，干线用仓库坐标和目的地坐标生成：

const cities = [ // {lat, lng, orders} 按城市聚合的订单量 { lat: 31.23, lng: 121.47, orders: 8600 }, { lat: 40.71, lng: -74.01, orders: 6400 }, // ... ]; const routes = [ // {startLat, startLng, endLat, endLng} 仓库→城市 { startLat: 22.54, startLng: 114.06, endLat: 31.23, endLng: 121.47 }, // ... ];

第二步，三行代码让地球"开口说话"：

const globe = new ThreeGlobe() .globeImageUrl('example/img/earth-night.jpg') .pointsData(cities).pointAltitude('orders') .arcsData(routes).arcDashLength(0.3).arcDashAnimateTime(1000);

第三步，补上heatmapsData把订单密度铺成热力层，再加 OrbitControls 让用户自由旋转：

globe.heatmapsData([cities]).heatmapPointWeight('orders');

刷新页面，一个能转的订单看板就立起来了。整个过程没有一行"地图厂商 SDK 专用语法"，全是通用数据对象。

小结：需求拆成"点 + 弧 + 热力"三份数据，three-globe 负责把三者叠在同一个球上，业务代码几乎为零。

五个新手必踩的坑，提前帮你排掉

这一节解决"别人踩过的坑，你别再踩一遍"。

1. 地球一片漆黑：多半是忘了加AmbientLight和DirectionalLight。没有光照，任何材质都渲染成黑影。
2. 画面被地球填满甚至全黑：相机默认在原点，会被球面包围。记得camera.position.z拉开距离，参考值 400-500。
3. 图片纹理加载不出来：本地用file://直接打开页面会触发跨域限制。起一个本地静态服务器（如npx serve）再访问。
4. 数据一更新就闪跳：给各图层设置*TransitionDuration，如pointsTransitionDuration(1000)，过渡动画会让更新平滑自然。
5. 数据量大到卡成 PPT：开启pointsMerge(true)、hexBinMerge(true)合并几何体，并用六边形聚合（hexBinPointsData）代替散点。项目自带的example/hexbin示例展示了 6000 个点的流畅效果。

往深了走：这些示例够你研究一整天

这一节解决"入门之后往哪走"。项目example/目录下有 15+ 个完整示例，我强烈建议你按这个顺序翻：

• 卫星轨道动画（example/satellites/）：用粒子图层 + TLE 轨道数据实时算出卫星位置，进阶必看；
• 瓦片地图引擎（example/tiles/、example/tile-engine/）：globeTileEngineUrl让地球表面像在线地图一样按缩放级别加载瓦片；
• 自定义图层（example/custom/）：customThreeObject允许你把任意 ThreeJS 模型挂到地球经纬度上，数据可视化从此不设限；
• 大气与昼夜（example/clouds/、example/day-night-cycle/）：叠加云层纹理、模拟昼夜光照，效果惊艳。

项目自带src/index.d.ts完整类型定义，配 IDE 提示阅读 API 效率极高；README 里的 API 参考表按图层分节，遇到不熟的参数查表即可。

从"会画"到"会讲"，只差一个三维地球的距离

复盘一下：three-globe 的核心价值，是把"全球数据"从二维平面的堆叠中解放出来——点、弧、面、热力，十几种图层自由叠加，百万数据点依然流畅，而这一切从 30 行代码开始。它不强迫你学习复杂的 WebGL 底层，只要求你给出经纬度和你想表达的业务含义。下一块数据大屏，就用它把世界转给用户看吧。🚀

【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe