一张会说数据的三维地球从零搭建只需半小时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 负责把三者叠在同一个球上业务代码几乎为零。五个新手必踩的坑提前帮你排掉这一节解决别人踩过的坑你别再踩一遍。地球一片漆黑多半是忘了加AmbientLight和DirectionalLight。没有光照任何材质都渲染成黑影。画面被地球填满甚至全黑相机默认在原点会被球面包围。记得camera.position.z拉开距离参考值 400-500。图片纹理加载不出来本地用file://直接打开页面会触发跨域限制。起一个本地静态服务器如npx serve再访问。数据一更新就闪跳给各图层设置*TransitionDuration如pointsTransitionDuration(1000)过渡动画会让更新平滑自然。数据量大到卡成 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 一张会说数据的三维地球，从零搭建只需半小时：three-globe 完整上手指南
一张会说数据的三维地球从零搭建只需半小时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 负责把三者叠在同一个球上业务代码几乎为零。五个新手必踩的坑提前帮你排掉这一节解决别人踩过的坑你别再踩一遍。地球一片漆黑多半是忘了加AmbientLight和DirectionalLight。没有光照任何材质都渲染成黑影。画面被地球填满甚至全黑相机默认在原点会被球面包围。记得camera.position.z拉开距离参考值 400-500。图片纹理加载不出来本地用file://直接打开页面会触发跨域限制。起一个本地静态服务器如npx serve再访问。数据一更新就闪跳给各图层设置*TransitionDuration如pointsTransitionDuration(1000)过渡动画会让更新平滑自然。数据量大到卡成 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考