地球贴图 ·Globe Map· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Scene / Camera / Renderer 标准渲染管线搭建案例完整源码结构与可复用初始化模板效果说明本案例演示地球贴图效果基于 WebGL 实现「地球贴图」可视化效果附完整可运行源码。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)),fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const primitive viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.EllipsoidGeometry({ vertexFormat: Cesium.VertexFormat.POSITION_AND_ST, radii: viewer.scene.globe.ellipsoid.radii, }), }), appearance: new Cesium.EllipsoidSurfaceAppearance({ material: new Cesium.Material({ fabric: { type: Image, uniforms: { image: FILE_HOST images/map/earth_clouds.png, alpha: 0.5, // repeat: new Cesium.Cartesian2(4.0, 4.0), // color: Cesium.Color.YELLOW, }, components: { alpha: texture(image, fract(materialInput.strepeat)).ralpha, diffuse: color.rgb, // 使用 color 作为漫反射颜色 }, }, }), translucent: true, // 是否半透明 aboveGround: true, // 是否在地表以上 }) }))let heading 0 viewer.scene.postRender.addEventListener(() { heading 0.1 primitive.modelMatrix Cesium.Transforms.headingPitchRollToFixedFrame( new Cesium.Cartesian3(), new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), 0, 0) ) })完整源码GitHub小结本文提供地球贴图完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
Cesium 地球贴图教程
地球贴图 ·Globe Map· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Scene / Camera / Renderer 标准渲染管线搭建案例完整源码结构与可复用初始化模板效果说明本案例演示地球贴图效果基于 WebGL 实现「地球贴图」可视化效果附完整可运行源码。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)),fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const primitive viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.EllipsoidGeometry({ vertexFormat: Cesium.VertexFormat.POSITION_AND_ST, radii: viewer.scene.globe.ellipsoid.radii, }), }), appearance: new Cesium.EllipsoidSurfaceAppearance({ material: new Cesium.Material({ fabric: { type: Image, uniforms: { image: FILE_HOST images/map/earth_clouds.png, alpha: 0.5, // repeat: new Cesium.Cartesian2(4.0, 4.0), // color: Cesium.Color.YELLOW, }, components: { alpha: texture(image, fract(materialInput.strepeat)).ralpha, diffuse: color.rgb, // 使用 color 作为漫反射颜色 }, }, }), translucent: true, // 是否半透明 aboveGround: true, // 是否在地表以上 }) }))let heading 0 viewer.scene.postRender.addEventListener(() { heading 0.1 primitive.modelMatrix Cesium.Transforms.headingPitchRollToFixedFrame( new Cesium.Cartesian3(), new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), 0, 0) ) })完整源码GitHub小结本文提供地球贴图完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
