尧图网站建设 
3D 地球可视化完整入门用 Three-Globe 快速搭建可交互数据地球的 5 步教程【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globethree-globe是一个基于 ThreeJS 的开源 3D 地球可视化库它把在网页里画一个能转、能缩放、能承载数据的立体地球这件事压缩成了几十行代码。无论你是想展示全球物流网络、航班航线还是人口与气象数据分布它都能让数据以专业级的交互式三维效果呈现而无需从零写任何 WebGL 底层逻辑。本文会带你从零跑通第一个可交互地球并分享新手最容易踩的坑和让地球更出彩的进阶玩法。一、受够了一张 2D 地图画不下全球数据做全球业务数据展示的人大概都有这种体验把上千条航线、上万个网点怼到一张 2D 平面地图上结果就是线条打架、标签重叠、密度看不出来。而换成三维球体之后分布、流动、密度三种信息可以同时立体地呈现——弧线表现从哪里到哪里的流动柱子表现哪里多哪里少热力高度表现哪里密哪里疏。问题在于自己写一个 WebGL 地球要处理球面投影、经纬度换算、光照材质、渲染循环……光是数学就劝退大半人。Three-Globe 的解法很直接你只管给经纬度和数据球面上的所有数学它包了。它把整个地球封装成一个 ThreeJS 的三维对象挂进场景就能用链式调用的 API 像搭积木一样直观。二、5 分钟跑通第一个可交互地球最快安装方法用 npm 安装注意three是它的同层依赖需要 0.154 版本npm install three-globe three如果你的项目不打算用构建工具也可以直接用 CDN 标签引入script src//cdn.jsdelivr.net/npm/three-globe/script最小示例带数据点的立体地球下面这段代码就是官方 basic 示例的精简版地球 场景 光照 相机 交互一条龙每一行都加了注释import ThreeGlobe from three-globe; import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js; // 1. 创建地球一个对象搞定表面贴图 数据点 const globe new ThreeGlobe() .globeImageUrl(example/img/earth-day.jpg) // 地球表面纹理白天贴图 .pointsData([ // 数据点列表 { lat: 39.9, lng: 116.4, size: 0.5, color: #ff5722 }, // 北京 { lat: 40.7, lng: -74, size: 0.5, color: #ff5722 } // 纽约 ]) .pointAltitude(size) // 柱子的高度取每条数据的 size 字段 .pointColor(color); // 柱子颜色取 color 字段 // 2. 搭建 ThreeJS 场景地球作为一个普通对象直接加入 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)); // 平行光 // 3. 相机与渲染器 const camera new THREE.PerspectiveCamera(); camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); camera.position.z 500; // 相机离地球足够远否则会掉进球里 const renderer new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 4. 加上鼠标拖拽/缩放控制并启动渲染循环 const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 开启惯性拖动更顺滑 (function animate() { controls.update(); renderer.render(scene, camera); // 每帧重绘 requestAnimationFrame(animate); })();运行后你就能拖拽旋转地球、滚动缩放视角两个标记点会像小柱子一样立在地表上。之后想加数据只需把pointsData换成自己的数组一切自动重建。三、藏在表象下的核心亮点为什么它只有一个对象用过 ThreeJS 的人都知道手搓一个球体需要 SphereGeometry、贴图、材质、光照、坐标换算层层配合。而 Three-Globe 的设计巧思在于两点亮点一整个地球是一个可复用的Object3D。它继承自 ThreeJS 的对象体系scene.add(globe)一行挂载后续所有数据图层、动画、材质都收纳在同一个对象内部。你既可以直接在原生 ThreeJS 项目里用也能像搭积木一样和任意其他 3D 物体共存。亮点二一切皆图层一切皆读取器。源码src/layers/下每个文件对应一种数据层points.js管标记点、arcs.js管弧线、hexbin.js管六边形聚合、rings.js管涟漪……每一层都遵循同一套链式 API 约定。更妙的是所有配置项都支持数字 / 字符串 / 函数三种写法传数字是全局常量传字符串是按字段取值传函数则完全自定义比如.pointAltitude(d d.count * 0.1)。这意味着同一份代码换一份数据、换几个 accessor就能呈现完全不同的业务场景这是它扩展性强的根本原因。四、避坑指南新手最常见的 5 个坑1. 纹理贴图必须是等距圆柱投影Three-Globe 要求表面图片采用等距圆柱投影equirectangular projection也就是长宽比为 2:1 的标准世界地图。如果随手丢一张普通投影的地图大陆板块会明显错位变形。项目自带的example/img/目录里就是合规贴图可直接使用。2. 忘了加灯光地球一片漆黑Three-Globe 默认材质依赖光照光都不加只会看到黑球。标准配置就是上面示例里的AmbientLight DirectionalLight组合先抄下来再调亮度。3. 相机掉进球里画面空白地球默认半径是 100 个空间单位相机要放到几百之外如camera.position.z 500配合 OrbitControls 再设置minDistance否则滚轮一拉近就穿模。4. 交互控制要自己接Three-Globe 只负责画不内置拖拽旋转。你需要自己接入OrbitControls或TrackballControls并在相机位置变化时调用globe.setPointOfView(camera)保持图层与视角同步部分依赖视线的图层必须这样做。5. 经纬度顺序和高度单位点数据默认读取lat/lng字段别写成lng在前所有*Altitude属性都是以球半径的倍数为单位的1 一个球半径不是像素也不是公里调参数时要心里有数。五、进阶玩法让地球更会讲故事1. 换一张纹理换一种叙事纹理决定第一印象夜间灯光图配航线弧线一眼就是全球枢纽网络暗色科技贴图配涟漪圈立刻有信号发射源的既视感。const globe new ThreeGlobe() .globeImageUrl(example/img/earth-night.jpg) // 夜晚城市灯光 .arcsData(flightRoutes) // 航线数据 .arcColor([#ffa726, #1565c0]) // 弧线渐变色 .arcDashLength(0.4) // 虚线弧段长度 .arcDashAnimateTime(1000); // 让光点沿弧线流动2. 海量数据用六边形聚合上万甚至上百万个点逐个渲染性能吃不消。hexBinPointsData基于 H3 地理索引把点聚合到六边形棱柱上再把hexBinMerge(true)把数千个网格合并成单个网格对象帧率立刻回来。官方 hexbin 示例用 6000 个随机点跑得毫无压力。3. 完全自定义的图层customLayerDatacustomThreeObject允许你往球面上挂任意 ThreeJS 物体再配合getCoords(lat, lng, alt)把经纬度换算成三维坐标甚至可以在球外放卫星、在球内做天气粒子。参考example/custom/index.html配合customThreeObjectUpdate实现不重建对象的高效更新。六、生态与下一步Three-Globe 当前版本为 2.45.2MIT 许可可放心商用仍在持续维护中。想深入探索几个入口很值得看官方 API 文档根目录README.md按图层完整罗列了全部方法及默认值是查阅参数的权威手册18 个完整示例example/目录下每个子文件夹都是一个可独立运行的 HTML从basic、links、country-polygons、heatmap、hexbin、ripples、clouds、day-night-cycle、satellites到tile-engine几乎覆盖所有功能源码结构src/layers/每个图层一个文件想搞懂内部实现或二次开发从这里入手最清晰TypeScript 支持内置完整类型定义配合编辑器提示用起来很省心。想跑通全部示例可以克隆仓库后在example/下起一个静态服务器逐个体验git clone https://gitcode.com/gh_mirrors/th/three-globe现在打开你的编辑器把第一个数据点放上地球吧——当那个小小的柱子从蓝色星球表面立起来的瞬间你会明白让全球数据被看见真的只需几十行代码。【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3D 地球可视化完整入门：用 Three-Globe 快速搭建可交互数据地球的 5 步教程
3D 地球可视化完整入门用 Three-Globe 快速搭建可交互数据地球的 5 步教程【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globethree-globe是一个基于 ThreeJS 的开源 3D 地球可视化库它把在网页里画一个能转、能缩放、能承载数据的立体地球这件事压缩成了几十行代码。无论你是想展示全球物流网络、航班航线还是人口与气象数据分布它都能让数据以专业级的交互式三维效果呈现而无需从零写任何 WebGL 底层逻辑。本文会带你从零跑通第一个可交互地球并分享新手最容易踩的坑和让地球更出彩的进阶玩法。一、受够了一张 2D 地图画不下全球数据做全球业务数据展示的人大概都有这种体验把上千条航线、上万个网点怼到一张 2D 平面地图上结果就是线条打架、标签重叠、密度看不出来。而换成三维球体之后分布、流动、密度三种信息可以同时立体地呈现——弧线表现从哪里到哪里的流动柱子表现哪里多哪里少热力高度表现哪里密哪里疏。问题在于自己写一个 WebGL 地球要处理球面投影、经纬度换算、光照材质、渲染循环……光是数学就劝退大半人。Three-Globe 的解法很直接你只管给经纬度和数据球面上的所有数学它包了。它把整个地球封装成一个 ThreeJS 的三维对象挂进场景就能用链式调用的 API 像搭积木一样直观。二、5 分钟跑通第一个可交互地球最快安装方法用 npm 安装注意three是它的同层依赖需要 0.154 版本npm install three-globe three如果你的项目不打算用构建工具也可以直接用 CDN 标签引入script src//cdn.jsdelivr.net/npm/three-globe/script最小示例带数据点的立体地球下面这段代码就是官方 basic 示例的精简版地球 场景 光照 相机 交互一条龙每一行都加了注释import ThreeGlobe from three-globe; import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js; // 1. 创建地球一个对象搞定表面贴图 数据点 const globe new ThreeGlobe() .globeImageUrl(example/img/earth-day.jpg) // 地球表面纹理白天贴图 .pointsData([ // 数据点列表 { lat: 39.9, lng: 116.4, size: 0.5, color: #ff5722 }, // 北京 { lat: 40.7, lng: -74, size: 0.5, color: #ff5722 } // 纽约 ]) .pointAltitude(size) // 柱子的高度取每条数据的 size 字段 .pointColor(color); // 柱子颜色取 color 字段 // 2. 搭建 ThreeJS 场景地球作为一个普通对象直接加入 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)); // 平行光 // 3. 相机与渲染器 const camera new THREE.PerspectiveCamera(); camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); camera.position.z 500; // 相机离地球足够远否则会掉进球里 const renderer new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 4. 加上鼠标拖拽/缩放控制并启动渲染循环 const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 开启惯性拖动更顺滑 (function animate() { controls.update(); renderer.render(scene, camera); // 每帧重绘 requestAnimationFrame(animate); })();运行后你就能拖拽旋转地球、滚动缩放视角两个标记点会像小柱子一样立在地表上。之后想加数据只需把pointsData换成自己的数组一切自动重建。三、藏在表象下的核心亮点为什么它只有一个对象用过 ThreeJS 的人都知道手搓一个球体需要 SphereGeometry、贴图、材质、光照、坐标换算层层配合。而 Three-Globe 的设计巧思在于两点亮点一整个地球是一个可复用的Object3D。它继承自 ThreeJS 的对象体系scene.add(globe)一行挂载后续所有数据图层、动画、材质都收纳在同一个对象内部。你既可以直接在原生 ThreeJS 项目里用也能像搭积木一样和任意其他 3D 物体共存。亮点二一切皆图层一切皆读取器。源码src/layers/下每个文件对应一种数据层points.js管标记点、arcs.js管弧线、hexbin.js管六边形聚合、rings.js管涟漪……每一层都遵循同一套链式 API 约定。更妙的是所有配置项都支持数字 / 字符串 / 函数三种写法传数字是全局常量传字符串是按字段取值传函数则完全自定义比如.pointAltitude(d d.count * 0.1)。这意味着同一份代码换一份数据、换几个 accessor就能呈现完全不同的业务场景这是它扩展性强的根本原因。四、避坑指南新手最常见的 5 个坑1. 纹理贴图必须是等距圆柱投影Three-Globe 要求表面图片采用等距圆柱投影equirectangular projection也就是长宽比为 2:1 的标准世界地图。如果随手丢一张普通投影的地图大陆板块会明显错位变形。项目自带的example/img/目录里就是合规贴图可直接使用。2. 忘了加灯光地球一片漆黑Three-Globe 默认材质依赖光照光都不加只会看到黑球。标准配置就是上面示例里的AmbientLight DirectionalLight组合先抄下来再调亮度。3. 相机掉进球里画面空白地球默认半径是 100 个空间单位相机要放到几百之外如camera.position.z 500配合 OrbitControls 再设置minDistance否则滚轮一拉近就穿模。4. 交互控制要自己接Three-Globe 只负责画不内置拖拽旋转。你需要自己接入OrbitControls或TrackballControls并在相机位置变化时调用globe.setPointOfView(camera)保持图层与视角同步部分依赖视线的图层必须这样做。5. 经纬度顺序和高度单位点数据默认读取lat/lng字段别写成lng在前所有*Altitude属性都是以球半径的倍数为单位的1 一个球半径不是像素也不是公里调参数时要心里有数。五、进阶玩法让地球更会讲故事1. 换一张纹理换一种叙事纹理决定第一印象夜间灯光图配航线弧线一眼就是全球枢纽网络暗色科技贴图配涟漪圈立刻有信号发射源的既视感。const globe new ThreeGlobe() .globeImageUrl(example/img/earth-night.jpg) // 夜晚城市灯光 .arcsData(flightRoutes) // 航线数据 .arcColor([#ffa726, #1565c0]) // 弧线渐变色 .arcDashLength(0.4) // 虚线弧段长度 .arcDashAnimateTime(1000); // 让光点沿弧线流动2. 海量数据用六边形聚合上万甚至上百万个点逐个渲染性能吃不消。hexBinPointsData基于 H3 地理索引把点聚合到六边形棱柱上再把hexBinMerge(true)把数千个网格合并成单个网格对象帧率立刻回来。官方 hexbin 示例用 6000 个随机点跑得毫无压力。3. 完全自定义的图层customLayerDatacustomThreeObject允许你往球面上挂任意 ThreeJS 物体再配合getCoords(lat, lng, alt)把经纬度换算成三维坐标甚至可以在球外放卫星、在球内做天气粒子。参考example/custom/index.html配合customThreeObjectUpdate实现不重建对象的高效更新。六、生态与下一步Three-Globe 当前版本为 2.45.2MIT 许可可放心商用仍在持续维护中。想深入探索几个入口很值得看官方 API 文档根目录README.md按图层完整罗列了全部方法及默认值是查阅参数的权威手册18 个完整示例example/目录下每个子文件夹都是一个可独立运行的 HTML从basic、links、country-polygons、heatmap、hexbin、ripples、clouds、day-night-cycle、satellites到tile-engine几乎覆盖所有功能源码结构src/layers/每个图层一个文件想搞懂内部实现或二次开发从这里入手最清晰TypeScript 支持内置完整类型定义配合编辑器提示用起来很省心。想跑通全部示例可以克隆仓库后在example/下起一个静态服务器逐个体验git clone https://gitcode.com/gh_mirrors/th/three-globe现在打开你的编辑器把第一个数据点放上地球吧——当那个小小的柱子从蓝色星球表面立起来的瞬间你会明白让全球数据被看见真的只需几十行代码。【免费下载链接】three-globeWebGL Globe Data Visualization as a ThreeJS reusable 3D object项目地址: https://gitcode.com/gh_mirrors/th/three-globe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考