今天讲下Cesium，说起来，用这个是因为模型，three.js用起来一直没有找到能加载模型的方法，所以就用Cesium了，因为模型的话加载起来，如果模型太大，加载起来会很慢，因为大模型加载需要先下载出来，然后才能用，所以对于用户体验来说，不太实用，因为用户不会为了模型一直等，如果碰上大模型，外加网络不好的话，几分钟的加载是有可能的，所以现在改用Cesium了
首先我们先看下怎么使用，然后就去了Cesium的官网，对于英语不太好的我来说，一进去我就头大了，因为里面全都是英文，在我们公司同事的帮助下，终于开始做项目了，先把基础的东西弄出来把，然后想要弄个和three.js一样，想要弄个方块，但是弄了很久就是没弄出来，对于现在来说，当时感觉就是在搞笑呢，现在先弄下基础的环境：
1.先弄出来一个基础的地球
a.先把引用的cesium.js下载出来再说。然后在官网上没找到，直接去他github上下载出来
github地址：https://github.com/CesiumGS/cesium
cesium下载地址：https://github.com/CesiumGS/cesium/releases
上面地址有cesium各个版本的下载文件
b.然后把下载出来的文件引入到html里面。上面下载出来的文件版本是1.68，下载过来的文件里面的文件目录是这样的：
引入文件的话:
2.然后我们开始创建环境，Cesium的话，最初可以创建一个Viewer，来装所有的东西，但是可能也不是只有viewer才行，之前在别人群里看到别人说过，说去掉viewer也是可以的，但是具体的没有去看过，现在在这里就先用这个基础的来说下吧
a.首先，先创建一个空白的viewer
根据官网所说，可以这样创建：
然而现在弄出来的结果却报错了，我看了下控制台，因为没有环境的原因，然后我就把本机的nginx打开了下，然后现在就出来结果了：
因为html默认样式的原因，这个canvas没有全屏，然后就设置了下样式：
css:
样式设置完之后就铺满屏幕了，但是又出现一个问题，现在这上面的东西好多啊，看着就乱，起码要弄成什么都没有吧，所以就需要把上面的东西全都去掉，只剩地球，这样才好，然后我们就需要设置viewer了，看文档，我们可以看到里面很多的属性
文档地址：https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html?classFilter=Viewer
然后把里面前几个默认true的属性都列出来，然后筛选下之后把属性都设置为false，还有把imageryProvider弄进去就可以了，上面地址里面有个案例，然后就出现现在的情况了：
然后底部还有个cesium的logo，没办法弄掉了，打开控制台之后，看到这个居然不是用canvas画的，所以就可以直接用css把他直接隐藏，哈哈，最后终于弄弄好了，纯净的地球出来了，只是画面有点难看，然后对于现在来说，我们已经弄成谷歌卫星地球的地图了，所以现在把代码弄出来，想要换的也可以改成这样的：
上面的是地球表面图形的加载，现在把所有的代码贴出来，看下这些里面的属性，然后把所有的东西都去掉
然后弄出来之后，就会出来现在的样子了：
然后放大就可以看到地球里面的细节，这个还是比较清晰的，如果想要显示原本地球上的所有的物件，可以看着里面的属性调节
然后如果要把地球隐藏掉的画，也可以把globe设置为false，这样可以把地球给隐藏掉，但是如果你啥也没弄出来之前，还是显示着吧，要不然看着一片黑暗，以为报错了呢。
好了，今天就先讲到这里吧，明天继续，未完待续。。。
网友评论