three-globe 3D地球可视化实战从一颗静态球体到百万级交互式数据地球的完整指南【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe如果你做过物流看板或全球运营监控系统多半遇到过这样的尴尬用 2D 地图画航线跨越大洋的连线要绕半个屏幕用 ECharts 的 globe 组件样式自由度又捉襟见肘真想自己用 ThreeJS 从零搓一个 3D 地球可视化光是把经纬度换算成球面坐标、把数据点贴到正确的位置就足够劝退一多半人。这就是今天这篇实战文章的主角——three-globe一个基于 ThreeJS 的 WebGL 开源库它把3D 地球可视化从硬核图形学问题变成了链式配置数据的问题几行代码就能让数据以点、弧线、热力、六边形柱体的形式铺满整个球面。为什么说它是被低估的 3D 地球可视化组件在选型之前我先把它和市面上常见的方案横向比了一遍结论很直接three-globe 解决的不是能不能画个球而是数据层好不好叠加。它本质是一个复用性极强的 ThreeJS 3D 对象你把它scene.add()进场景就完事剩下的视角控制、光照、渲染循环全部沿用你熟悉的 ThreeJS 写法。对比之下直接用原生 ThreeJS 手写球体你需要自己处理经纬度投影、球面贴图、数据点拾取、弧线大圆插值把地球表面两点的连线沿球面弯曲——这些恰恰是 2D 地图库从不需要面对、但 3D 场景里最容易翻车的部分。而它和 2D 地图库如 Leaflet、Mapbox也不是竞争关系2D 地图适合看局部细节3D 地球适合看全局态势。物流网络、卫星轨道、气象分布这类天然带全球空间属性的数据放在 2D 墨卡托投影里会被拉变形放在球面上才符合直觉。我实测的感受是把 6000 个随机点扔进六边形聚合层球体旋转、缩放依旧流畅这个性能底子对业务看板来说绰绰有余。这是项目自带的预览效果黄色数据点铺满深色球面红色的辐射弧线从地表升起一眼就能看出全球数据态势的观感。最快跑通路径两种安装方式10 行代码见球第一步不复杂二选一即可。如果你在用 npm 管理前端工程直接装npm install three-globeimport ThreeGlobe from three-globe;如果只是想在 HTML 里快速验证效果CDN 引入更方便配合 importmap 还能免去打包步骤script src//cdn.jsdelivr.net/npm/three-globe/script接下来是核心三步建地球 → 塞数据 → 丢进场景。下面这段来自项目基础示例example/basic/index.html的逻辑是体验 three-globe 最快的方式import ThreeGlobe from three-globe; import * as THREE from three; import { TrackballControls } from three/examples/jsm/controls/TrackballControls.js; const globe new ThreeGlobe() .globeImageUrl(//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg) .bumpImageUrl(//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png) .pointsData(gData) // gData 是 [{lat, lng, size, color}] 数组 .pointAltitude(size) .pointColor(color); const scene new THREE.Scene(); scene.add(globe); // 地球是一个普通的 ThreeJS Group直接加入场景globeImageUrl指定球面纹理bumpImageUrl叠加地形凹凸贴图pointsData灌入数据点接下来用pointAltitude和pointColor声明从数据的哪个字段取值。这段代码做了什么一句话它让每一个{lat, lng}坐标都变成了球面上竖直升起的小圆柱高度和颜色随数据变化。剩下的渲染循环、轨道控制旋转/缩放都是标准 ThreeJS 代码没有任何黑魔法。核心能力逐层拆解这个库到底能叠几层数据three-globe 的架构在源码里一眼能看穿——src/layers/目录下每一个文件对应一个图层arcs、points、polygons、heatmaps、hexbin、rings、labels、htmlElements、particles 等每个图层独立配置、互不干扰最后统一挂到src/three-globe.js导出的 Group 上。这种一个数据层 一组链式方法的设计是它区别于普通 ThreeJS 封装库的最大亮点。下面按业务使用频率逐个过。点图层标记位置的最短路径点图层适合标记门店、基站、仓库这类离散位置。默认每个点是从球面升起的圆柱体你可以控制它凸起多高globe.pointsData(stores) .pointColor(d d.status online ? #00ff88 : #ff5555) .pointAltitude(d d.sales * 0.1) // 销售额越大柱子越高 .pointRadius(0.35);效果上就是一根根数据柱子从地球表面长出来旋转地球时立体感非常强比 2D 散点图的视觉冲击力大得多。弧线图层让连接关系看得见这是最有高级感的图层。航线、资金流、服务器间的请求链路都能用一条从地表隆起的弧线表达。示例example/links/index.html里的写法globe.arcsData(flightRoutes) .arcColor([#ffa726, #1565c0]) .arcDashLength(0.4) // 虚线占比 .arcDashGap(4) // 虚线段间距 .arcDashAnimateTime(1000); // 虚线沿弧线流动的动画时长弧线的数据格式是{startLat, startLng, endLat, endLng}。我实测发现最有用的参数是arcDashAnimateTime——开启后虚线会像数据流一样从起点流向终点做实时传输监控时观感极佳。搭配夜晚纹理城市灯光作底、流光作线就是典型的全球网络拓扑效果。多边形与六边形从画边界到算密度多边形图层直接吃 GeoJSONexample/country-polygons/目录里就有一份现成的国家边界数据ne_110m_admin_0_countries.geojson。每个多边形默认是一个从球面外凸的锥体用polygonAltitude控制凸起高度polygonCapColor控制顶面颜色可以轻松做出按 GDP 着色 按人口拔高的国家级数据地图。而当数据点多到几万个、一个个画圆柱会卡顿的时候就该上六边形聚合hexbin了。它用 Uber 开源的 h3-js 把球面切成六边形蜂窝每个蜂窝汇总落入其中的点数globe.hexBinPointsData(6000 个点) .hexBinResolution(2) // 蜂窝大小级别0~15 .hexTopColor(() red) .hexSideColor(() rgba(0,255,0,0.8)) .hexBinMerge(true); // 合并网格大幅提升渲染性能6000 个点立刻被压缩成几百个六边形柱体地球随便转都不掉帧。这是百万级数据场景的默认打开方式。热力图与涟漪把分布密度和事件扩散演出来热力图图层适合人口密度、温度、地震分布这类连续场数据。它内部用高斯核密度估计KDE一种根据点周围的疏密程度计算连续密度的算法把离散点摊成平滑的颜色渐变曲面带宽bandwidth控制扩散范围还能用heatmapTopAltitude让高密度区域真的鼓起来。涟漪图层rings则是一个自带动画的彩蛋——每个数据点会周期性地向外扩散同心圆环像石子投入水面。官方示例example/ripples/里配合地震数据使用震中位置不断荡出波纹感染力直接拉满。globe.ringsData(earthquakes) .ringMaxRadius(3) // 扩散最大半径 .ringPropagationSpeed(2) // 扩散速度 .ringRepeatPeriod(600); // 每 600ms 生成一个新圆环从一个裸球到一个完整的全球态势大屏逐步叠加的过程光看 API 列表容易犯晕我换个方式带你把一个空球逐步改造成带数据、带交互、带氛围的完整方案。全程只用链式方法往同一个globe实例上叠加你会直观感受到这个库越叠越丰富、代码却越来越短的设计哲学。第 1 步先给球穿上衣服。只加载纹理得到一个看得过去的星球底座const globe new ThreeGlobe().globeImageUrl(earth-day.jpg);第 2 步加一层科技感外壳。换深色纹理、开大气光晕showAtmosphere默认就是 true球体外会有一圈淡蓝色光晕像地球的大气层const globe new ThreeGlobe() .globeImageUrl(earth-dark.jpg) .bumpImageUrl(earth-topology.png) // 凹凸贴图让大陆有立体起伏 .atmosphereColor(lightskyblue);第 3 步叠数据层。把点位、航线、密度热力一口气全加进来这就是从展示球到业务看板的关键一跃const globe new ThreeGlobe() .globeImageUrl(earth-dark.jpg) .pointsData(stores) // 业务点 .arcsData(routes) // 连接线 .arcDashAnimateTime(800) .heatmapsData([densityData]) // 密度分布 .heatmapTopAltitude(0.5);第 4 步加氛围和文字。用example/clouds/clouds.png叠一层半透明云层增强真实感再用 Labels 图层给关键节点贴名字globe.labelsData(cityLabels) .labelText(d d.city) .labelSize(0.6);第 5 步开启性能开关收尾。数据量上来后把多个图层的合并开关打开让几何体从成千上万个独立对象变成一个大对象渲染压力骤降const globe new ThreeGlobe({ waitForGlobeReady: true, animateIn: false }) .pointsMerge(true) .hexBinMerge(true);避坑指南与提速建议我踩过的 5 个坑项目自带 16 个示例example/ 目录下覆盖从 basic 到 satellites 到 tile-engine 的全部能力照着抄基本不会错但有几个坑官方文档不会主动提醒你我实测后整理如下。坑 1WebGL 球体的透明面。如果你的地球从某个角度看起来缺了一块多半是 ThreeJS 材质的side属性没设成双面渲染。three-globe 的球体默认是正常的但当你用globeMaterial()换自定义材质时记得检查这一项。坑 2数据更新导致闪烁。直接替换整个数据数组时图层会重建几何体看起来像闪了一下。解法是给过渡动画留时间pointsTransitionDuration(1000)、arcsTransitionDuration(1000)这类方法默认就是 1000ms新数据会以从地面长出来的方式平滑过渡别把它设成 0除非你要的是硬切。坑 3弧线变面条。弧线默认是 1px 细线放大后几乎不可见。想控制线宽就用arcStroke()开启 Tube 几何体类似给线套了一根管子想保持流畅就把arcCurveResolution控制在 64 左右太高会白耗性能。坑 4高分辨率纹理 低端机 卡。项目自带的 earth-blue-marble.jpg 是 4096×2048 的高清图实测在集成显卡上旋转有明显迟滞。视觉上够用的话换成 2048×1024 的 earth-dark.jpg或者用globeCurvatureResolution(6)降低球面细分帧率立竿见影。坑 5粒子图层白点一团。用粒子模拟卫星或星空时别忘了纹理的颜色空间项目卫星示例example/satellites/里特意写了texture.colorSpace THREE.SRGBColorSpace漏掉这行贴图颜色会发灰。继续深入从哪里读源码、玩哪个示例看完这篇我建议你按抄 → 改 → 造三步走抄本地跑起来最快的方式是git clone https://gitcode.com/gh_mirrors/th/three-globe后直接打开example/basic/index.html再顺手过一遍example/links/弧线、example/hexbin/聚合、example/heatmap/热力每个示例都只有 70 行左右注释清晰。改把示例里的随机数据换成自己的业务数据体会一下换数据源但一行渲染代码都不用动的爽感。造进阶玩法是自定义图层和自定义材质。src/layers/custom.js提供了customThreeObject()接口允许你把任意 ThreeJS 对象比如一个火箭模型、一栋建筑挂到球面坐标上example/custom-material/展示了如何用 shader 写一个昼夜交替的地球白天/夜晚纹理按太阳位置融合example/satellites/则演示了用 TLE 轨道数据实时推算卫星位置——这两个示例看完你对 three-globe 的能力边界就有了完整认知。TypeScript 用户放心用项目在src/index.d.ts提供了完整的类型定义IDE 补全和类型检查都是开箱即用的。最后说一句心里话three-globe 的价值不在于它画了个球而在于它把 3D 地球可视化从图形学专家专属降级成了写数据接入的普通前端也能驾驭。它不负责交互控制那是 OrbitControls 的活、不负责业务语义它只做一件事——让你丢进去的数据以最直观的方式在球面上活起来。下一块业务看板不妨试试把它丢进场景里。【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
three-globe 3D地球可视化实战：从一颗静态球体到百万级交互式数据地球的完整指南
three-globe 3D地球可视化实战从一颗静态球体到百万级交互式数据地球的完整指南【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe如果你做过物流看板或全球运营监控系统多半遇到过这样的尴尬用 2D 地图画航线跨越大洋的连线要绕半个屏幕用 ECharts 的 globe 组件样式自由度又捉襟见肘真想自己用 ThreeJS 从零搓一个 3D 地球可视化光是把经纬度换算成球面坐标、把数据点贴到正确的位置就足够劝退一多半人。这就是今天这篇实战文章的主角——three-globe一个基于 ThreeJS 的 WebGL 开源库它把3D 地球可视化从硬核图形学问题变成了链式配置数据的问题几行代码就能让数据以点、弧线、热力、六边形柱体的形式铺满整个球面。为什么说它是被低估的 3D 地球可视化组件在选型之前我先把它和市面上常见的方案横向比了一遍结论很直接three-globe 解决的不是能不能画个球而是数据层好不好叠加。它本质是一个复用性极强的 ThreeJS 3D 对象你把它scene.add()进场景就完事剩下的视角控制、光照、渲染循环全部沿用你熟悉的 ThreeJS 写法。对比之下直接用原生 ThreeJS 手写球体你需要自己处理经纬度投影、球面贴图、数据点拾取、弧线大圆插值把地球表面两点的连线沿球面弯曲——这些恰恰是 2D 地图库从不需要面对、但 3D 场景里最容易翻车的部分。而它和 2D 地图库如 Leaflet、Mapbox也不是竞争关系2D 地图适合看局部细节3D 地球适合看全局态势。物流网络、卫星轨道、气象分布这类天然带全球空间属性的数据放在 2D 墨卡托投影里会被拉变形放在球面上才符合直觉。我实测的感受是把 6000 个随机点扔进六边形聚合层球体旋转、缩放依旧流畅这个性能底子对业务看板来说绰绰有余。这是项目自带的预览效果黄色数据点铺满深色球面红色的辐射弧线从地表升起一眼就能看出全球数据态势的观感。最快跑通路径两种安装方式10 行代码见球第一步不复杂二选一即可。如果你在用 npm 管理前端工程直接装npm install three-globeimport ThreeGlobe from three-globe;如果只是想在 HTML 里快速验证效果CDN 引入更方便配合 importmap 还能免去打包步骤script src//cdn.jsdelivr.net/npm/three-globe/script接下来是核心三步建地球 → 塞数据 → 丢进场景。下面这段来自项目基础示例example/basic/index.html的逻辑是体验 three-globe 最快的方式import ThreeGlobe from three-globe; import * as THREE from three; import { TrackballControls } from three/examples/jsm/controls/TrackballControls.js; const globe new ThreeGlobe() .globeImageUrl(//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg) .bumpImageUrl(//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png) .pointsData(gData) // gData 是 [{lat, lng, size, color}] 数组 .pointAltitude(size) .pointColor(color); const scene new THREE.Scene(); scene.add(globe); // 地球是一个普通的 ThreeJS Group直接加入场景globeImageUrl指定球面纹理bumpImageUrl叠加地形凹凸贴图pointsData灌入数据点接下来用pointAltitude和pointColor声明从数据的哪个字段取值。这段代码做了什么一句话它让每一个{lat, lng}坐标都变成了球面上竖直升起的小圆柱高度和颜色随数据变化。剩下的渲染循环、轨道控制旋转/缩放都是标准 ThreeJS 代码没有任何黑魔法。核心能力逐层拆解这个库到底能叠几层数据three-globe 的架构在源码里一眼能看穿——src/layers/目录下每一个文件对应一个图层arcs、points、polygons、heatmaps、hexbin、rings、labels、htmlElements、particles 等每个图层独立配置、互不干扰最后统一挂到src/three-globe.js导出的 Group 上。这种一个数据层 一组链式方法的设计是它区别于普通 ThreeJS 封装库的最大亮点。下面按业务使用频率逐个过。点图层标记位置的最短路径点图层适合标记门店、基站、仓库这类离散位置。默认每个点是从球面升起的圆柱体你可以控制它凸起多高globe.pointsData(stores) .pointColor(d d.status online ? #00ff88 : #ff5555) .pointAltitude(d d.sales * 0.1) // 销售额越大柱子越高 .pointRadius(0.35);效果上就是一根根数据柱子从地球表面长出来旋转地球时立体感非常强比 2D 散点图的视觉冲击力大得多。弧线图层让连接关系看得见这是最有高级感的图层。航线、资金流、服务器间的请求链路都能用一条从地表隆起的弧线表达。示例example/links/index.html里的写法globe.arcsData(flightRoutes) .arcColor([#ffa726, #1565c0]) .arcDashLength(0.4) // 虚线占比 .arcDashGap(4) // 虚线段间距 .arcDashAnimateTime(1000); // 虚线沿弧线流动的动画时长弧线的数据格式是{startLat, startLng, endLat, endLng}。我实测发现最有用的参数是arcDashAnimateTime——开启后虚线会像数据流一样从起点流向终点做实时传输监控时观感极佳。搭配夜晚纹理城市灯光作底、流光作线就是典型的全球网络拓扑效果。多边形与六边形从画边界到算密度多边形图层直接吃 GeoJSONexample/country-polygons/目录里就有一份现成的国家边界数据ne_110m_admin_0_countries.geojson。每个多边形默认是一个从球面外凸的锥体用polygonAltitude控制凸起高度polygonCapColor控制顶面颜色可以轻松做出按 GDP 着色 按人口拔高的国家级数据地图。而当数据点多到几万个、一个个画圆柱会卡顿的时候就该上六边形聚合hexbin了。它用 Uber 开源的 h3-js 把球面切成六边形蜂窝每个蜂窝汇总落入其中的点数globe.hexBinPointsData(6000 个点) .hexBinResolution(2) // 蜂窝大小级别0~15 .hexTopColor(() red) .hexSideColor(() rgba(0,255,0,0.8)) .hexBinMerge(true); // 合并网格大幅提升渲染性能6000 个点立刻被压缩成几百个六边形柱体地球随便转都不掉帧。这是百万级数据场景的默认打开方式。热力图与涟漪把分布密度和事件扩散演出来热力图图层适合人口密度、温度、地震分布这类连续场数据。它内部用高斯核密度估计KDE一种根据点周围的疏密程度计算连续密度的算法把离散点摊成平滑的颜色渐变曲面带宽bandwidth控制扩散范围还能用heatmapTopAltitude让高密度区域真的鼓起来。涟漪图层rings则是一个自带动画的彩蛋——每个数据点会周期性地向外扩散同心圆环像石子投入水面。官方示例example/ripples/里配合地震数据使用震中位置不断荡出波纹感染力直接拉满。globe.ringsData(earthquakes) .ringMaxRadius(3) // 扩散最大半径 .ringPropagationSpeed(2) // 扩散速度 .ringRepeatPeriod(600); // 每 600ms 生成一个新圆环从一个裸球到一个完整的全球态势大屏逐步叠加的过程光看 API 列表容易犯晕我换个方式带你把一个空球逐步改造成带数据、带交互、带氛围的完整方案。全程只用链式方法往同一个globe实例上叠加你会直观感受到这个库越叠越丰富、代码却越来越短的设计哲学。第 1 步先给球穿上衣服。只加载纹理得到一个看得过去的星球底座const globe new ThreeGlobe().globeImageUrl(earth-day.jpg);第 2 步加一层科技感外壳。换深色纹理、开大气光晕showAtmosphere默认就是 true球体外会有一圈淡蓝色光晕像地球的大气层const globe new ThreeGlobe() .globeImageUrl(earth-dark.jpg) .bumpImageUrl(earth-topology.png) // 凹凸贴图让大陆有立体起伏 .atmosphereColor(lightskyblue);第 3 步叠数据层。把点位、航线、密度热力一口气全加进来这就是从展示球到业务看板的关键一跃const globe new ThreeGlobe() .globeImageUrl(earth-dark.jpg) .pointsData(stores) // 业务点 .arcsData(routes) // 连接线 .arcDashAnimateTime(800) .heatmapsData([densityData]) // 密度分布 .heatmapTopAltitude(0.5);第 4 步加氛围和文字。用example/clouds/clouds.png叠一层半透明云层增强真实感再用 Labels 图层给关键节点贴名字globe.labelsData(cityLabels) .labelText(d d.city) .labelSize(0.6);第 5 步开启性能开关收尾。数据量上来后把多个图层的合并开关打开让几何体从成千上万个独立对象变成一个大对象渲染压力骤降const globe new ThreeGlobe({ waitForGlobeReady: true, animateIn: false }) .pointsMerge(true) .hexBinMerge(true);避坑指南与提速建议我踩过的 5 个坑项目自带 16 个示例example/ 目录下覆盖从 basic 到 satellites 到 tile-engine 的全部能力照着抄基本不会错但有几个坑官方文档不会主动提醒你我实测后整理如下。坑 1WebGL 球体的透明面。如果你的地球从某个角度看起来缺了一块多半是 ThreeJS 材质的side属性没设成双面渲染。three-globe 的球体默认是正常的但当你用globeMaterial()换自定义材质时记得检查这一项。坑 2数据更新导致闪烁。直接替换整个数据数组时图层会重建几何体看起来像闪了一下。解法是给过渡动画留时间pointsTransitionDuration(1000)、arcsTransitionDuration(1000)这类方法默认就是 1000ms新数据会以从地面长出来的方式平滑过渡别把它设成 0除非你要的是硬切。坑 3弧线变面条。弧线默认是 1px 细线放大后几乎不可见。想控制线宽就用arcStroke()开启 Tube 几何体类似给线套了一根管子想保持流畅就把arcCurveResolution控制在 64 左右太高会白耗性能。坑 4高分辨率纹理 低端机 卡。项目自带的 earth-blue-marble.jpg 是 4096×2048 的高清图实测在集成显卡上旋转有明显迟滞。视觉上够用的话换成 2048×1024 的 earth-dark.jpg或者用globeCurvatureResolution(6)降低球面细分帧率立竿见影。坑 5粒子图层白点一团。用粒子模拟卫星或星空时别忘了纹理的颜色空间项目卫星示例example/satellites/里特意写了texture.colorSpace THREE.SRGBColorSpace漏掉这行贴图颜色会发灰。继续深入从哪里读源码、玩哪个示例看完这篇我建议你按抄 → 改 → 造三步走抄本地跑起来最快的方式是git clone https://gitcode.com/gh_mirrors/th/three-globe后直接打开example/basic/index.html再顺手过一遍example/links/弧线、example/hexbin/聚合、example/heatmap/热力每个示例都只有 70 行左右注释清晰。改把示例里的随机数据换成自己的业务数据体会一下换数据源但一行渲染代码都不用动的爽感。造进阶玩法是自定义图层和自定义材质。src/layers/custom.js提供了customThreeObject()接口允许你把任意 ThreeJS 对象比如一个火箭模型、一栋建筑挂到球面坐标上example/custom-material/展示了如何用 shader 写一个昼夜交替的地球白天/夜晚纹理按太阳位置融合example/satellites/则演示了用 TLE 轨道数据实时推算卫星位置——这两个示例看完你对 three-globe 的能力边界就有了完整认知。TypeScript 用户放心用项目在src/index.d.ts提供了完整的类型定义IDE 补全和类型检查都是开箱即用的。最后说一句心里话three-globe 的价值不在于它画了个球而在于它把 3D 地球可视化从图形学专家专属降级成了写数据接入的普通前端也能驾驭。它不负责交互控制那是 OrbitControls 的活、不负责业务语义它只做一件事——让你丢进去的数据以最直观的方式在球面上活起来。下一块业务看板不妨试试把它丢进场景里。【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
与PAC-DCG)
