记录视角 ·Save Camera View· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么序列化camera的位置、方向、视锥参数用sessionStorage在浏览器会话内持久化书签恢复视角时flyTo与setView的差异Model.fromGltfAsync低层加载 glTF效果说明调整相机到满意角度后点击「保存视角」刷新页面或再次打开仍可恢复可配置 glb URL加载模型到东京坐标并飞到该处。核心概念需要保存哪些字段| 字段 | 含义 | |------|------| |positionWC/ 经纬高 | 相机世界坐标 | |directionWC/upWC| 视线与上方向直接赋值可瞬间恢复 | |heading/pitch/roll| 欧拉角只读但可传给 flyTo | |frustum.fov/near/far| 透视视锥 |const saveView () ({positionDegrees: cartesian3ToDegrees(camera.positionWC), position: camera.positionWC, direction: camera.directionWC, up: camera.upWC, frustum: { fov: camera.frustum.fov, near: camera.frustum.near, far: camera.frustum.far, }, heading: camera.heading, pitch: camera.pitch, roll: camera.roll, });两种恢复方式直接写 WC 分量页面初始化无动画适合首屏flyTo orientation用户点击恢复有过渡源码里loadView随机二选一仅为演示两种 API。sessionStorage 结构{url: .../coffeeMug.glb, view: { positionDegrees, heading, pitch, roll, ... } }::: warningCartesian3序列化后是普通{x,y,z}对象JSON 存取后需重新构造或直接用分量赋值。 :::实现步骤初始化 Viewer 与camera引用页面加载时读sessionStorage若有view则直接赋positionWC等GUI「保存视角」调用saveView()写入 storage「恢复保存视角」读 storage 后loadView可选按storage.url用Model.fromGltfAsync加载模型代码要点import * as Cesium from cesium// Cesium官网的token Cesium.Ion.defaultAccessToken your-cesium-ion-access-tokenconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {imageryProvider: false, //关闭默认底图animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮geocoder: false,//是否显示geocoder小器件右上角查询按钮homeButton: false,//是否显示Home按钮右上角home按钮sceneMode: Cesium.SceneMode.SCENE3D,//初始场景模式sceneModePicker: false,//是否显示3D/2D选择器右上角按钮navigationHelpButton: false,//是否显示右上角的帮助按钮selectionIndicator: false,//是否显示选取指示器组件timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框scene3DOnly: true,//如果设置为true则所有几何图形以3D模式绘制以节约GPU资源orderIndependentTranslucency: false, //是否启用无序透明contextOptions: { webgl: { alpha: true } },skyBox: new Cesium.SkyBox({ show: false })})viewer.scene.sun.show falseviewer.scene.moon.show falseviewer.scene.skyBox.show falseviewer.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0)viewer._cesiumWidget._creditContainer.style.display noneconsole.log(Cesium.VERSION)完整源码GitHub小结本文提供记录视角完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库