准备知识：

Cesium里实现地球自转，第一想到的是每次渲染前移动相机位置。这个位置怎么求？

Cesium里由两个基本坐标系，惯性坐标系和地固坐标系，不了解的可以搜搜其他文章，这里不详细描述。简单就是惯性系的坐标轴方向是不变的，而地固系是随地球自转而转动的。

明白这个就好说了，实现自转其实这里相机位置可以认为在惯性系里是不变的，我们只需求出每个时刻惯性到地固的转换矩阵，就能知道相机位置每时刻在地固中的变化。Cesium本身transform中有地固和惯性坐标系转换的矩阵，输入是JulianDate。（注意，该方法需要加载一些计算用到的资源，所以没加载资源前调用会返回undefined）。

编码就简单啦

vue下：（这里我引入cesium的方式不同，cesium需用this.Cesium调用，有全局引入的直接调Cesium就行）

调用方法

startRun (option = { multiplier: 1 }) {let viewer = window.earth // 创建cesium的viewer// 监听每次渲染前执行矩阵求解viewer.scene.postUpdate.addEventListener(this.rotateSetting) // 根据option修改一些参数if (viewer.clock) {const keys = Object.keys(option)for (let k of keys) {viewer.clock[k] = option[k]}}}

停止监听

stopRun () {let viewer = window.earthviewer.clock.multiplier = 1viewer.scene.postUpdate.removeEventListener(this.rotateSetting)},

获取矩阵及更新相机

rotateSetting () {let Cesium = this.Cesiumlet viewer = window.earthif (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {return}const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(viewer.clock.currentTime)// icrfToFixed 在上面的方法中，若没加载好所需的计算资源会返回undefined，判断下if (Cesium.defined(icrfToFixed)) {const camera = viewer.cameraconst offset = Cesium.Cartesian3.clone(camera.position)const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)camera.lookAtTransform(transform, offset)}}

一切准备就绪，在初始化Cesium后，调用

this.startRun({ multiplier: 1 })

咦？地球没转啊，你莫是坑老子吧？

别急，地球自转24小时一圈，要看到明显转动，我们需要加速一下，增大 multiplier

this.startRun({ multiplier: 1000 })

地球它转起来了！！！

转载请注明出处。

Cesium 实现地球自转效果相关推荐

cesium实现地球自转效果
文章目录 1.实现效果 2.实现方法 2.1官方参考 2.2具体实现 2.2.1核心代码 2.2.2调用方法 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1官方参考参考 ...
031：cesium地球自转效果
第031个点击查看专栏目录本示例的目的是介绍如何在vue+cesium中实现地球自转效果. 直接复制下面的 vue+cesium源代码,操作2分钟即可运行实现效果. 文章目录示例效果配置方式 ...
cesium 模拟地球自转
cesium 模拟地球自转 cesium 现有的机制分析默认情况下,cesium 的球体其实在三维中是保持静止的状态. 而随着时间的流逝,默认的背景星空,是在不断地旋转的. 这个逻辑,我们从 ces ...
cesium 实现地球自转
我们用typescript 实现一个地球自转工具类. /**地球自转 / export class GlobalRotate{ private viewer: any = null; private ...
cesium实现地球自转功能
地球自转 var i let previousTime function startRotate() {stopRotate()previousTime = viewer.clock.currentT ...
Cesium实现地球自转明暗分割，类似官网封面效果
这几天博主没事看Cesium官网的时候,觉得首页的地球自转效果就很炫酷,想着自己也做一个,奈何想不到思路,在CSDN和stackoverflow上也没有找到类似的功能,所以就只能自己造轮子了,这个效果 ...
html制作地球自转,利用CSS3实现地球自转
这篇文章主要介绍了关于利用CSS3实现地球自转,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 CSS3实现地球自转,不可思议啊,不过确实可以实现,不信的朋友可以祥看本文,附送源码最终 ...
html 地球页面代码,纯CSS3实现地球自转实现代码(图文教程附送源码)
最终成果: 素材:两张图片, espaco.jpg(1600*1000) terra.jpg(900*450) 第一步,形成静态图(地球背景全屏,地球大小为450px*450px,地球位置为上下左右居 ...
html怎么实现地球自转,纯CSS3实现地球自转的教程
相信很多人在听到CSS3实现地球自转的时候都会很惊讶,不过css确实可以实现地球自转,那么你知道纯CSS3如何实现地球自转吗?好奇的小伙伴们一起跟爱站小编去看看纯CSS3实现地球自转的教程吧. 最终成 ...

Cesium 实现地球自转效果

准备知识：

Cesium 实现地球自转效果相关推荐

最新文章

热门文章