Cesium.js 初试

今天讲下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,这样可以把地球给隐藏掉,但是如果你啥也没弄出来之前,还是显示着吧,要不然看着一片黑暗,以为报错了呢。

好了,今天就先讲到这里吧,明天继续,未完待续。。。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容