1. CesiumWidget才是核心类

Cesium的api非常烦杂，我们从核心说起。搭建一个三维Web程序所需要的最基本的东西有哪些呢？我们需要一个div，然后基于此div创建canvas，引入webgl环境。每个三维渲染引擎都有各自不同的方法或者类来做这件事情，Cesium则是通过CesiumWidget这个类创建。如下所示：

html代码部分

<style>@import url(../templates/bucket.css);</style><div id="cesiumContainer" class="fullSize"></div><div id="loadingOverlay"><h1>Loading...</h1></div><div id="toolbar"></div>

js代码部分

// Cesium.CesiumWidget is similar to Cesium.Viewer, but
// is trimmed down.  It is just a widget for the 3D globe;
// it does not include the animation, imagery selection,
// and other widgets, nor does it depend on the third-party
// Knockout library.
const widget = new Cesium.CesiumWidget("cesiumContainer");

http://localhost:8080/Apps/Sandcastle/index.html?src=Cesium%20Widget.html

这个示例在Cesium的Sandcastle当中，但是非常不起眼。很多人容易忽略掉。因为这几乎是唯一使用CesiumWidget来创建Cesium三维应用的示例了。但这并不代表它不重要。相反，它才是真正创建Cesium三维窗口的核心类。

如果是已经使用Cesium进行开发过的小伙伴们，可能对此类并不熟悉。毕竟Cesium中最常用的是Viewer、Entity这些类。不过这些类内部结构比较复杂，我们还是希望先忽略这两个类。等把底层的框架说清楚以后，再回头看着两个类，会对Cesium的理解更加深刻。

CesiumWidget构造时，手里拿了一个叫cesiumContainer的字符串，它实际上是一个div的id。这个div好比一个舞台，CesiumWidget有了这个舞台，就开始创建一系列子div，还是canvas对象，据此搭建了整个三维场景。
CesiumWidget内部创建的对象主要有以下几个部分，如图所示：

clock用来记录时间，毕竟三维场景需要进行动态展示，需要通过时间来确定某一帧的绘制内容。

container则是构造函数的参数，也就是传入的div，这里记录一下。

canvas则是在container上构建的Canvas类的对象，可以据此获取WebGL绘制的画笔。

screenSpaceEventHandler则是对Canvas对象上各种鼠标的交互事件的封装，方便传递给三维场景。

三维场景干之后可以据此改变相机姿态等。 scene则承载着整个三维场景中的对象。

2. Scene中装载了所有的三维对象

Scene中有一些内置的图元对象：地球（globe）、skyBox（天空盒）、sun（太阳）、moon（月亮）等等；另外还有两个用来由用户自行控制存放对象的数组：primitives和groundPrimitives。

3. 图元类对应一个三维渲染对象

图元是Cesium用来绘制三维对象的一个独立的结构。图元类有：Globe、Model、Primitive、BillboardCollection、ViewportQuad等。

Globe绘制的是全球地形，它需要两个东西，一个是地形高程信息，另外一个是影像图层，也就是地球的表皮。影像图层可以叠加多个，但是地形高程只能有一个。整个地形的绘制也是渐进式的，即视线看到的地方才会去调度相关的地形高程信息，找到对应位置的地形影像贴上。然而Globe只是一个图元。由此可见一个图元可以相当复杂。

需要注意的地方：

图元没有基类，但是所有的图元都会有update函数；
Primitive类直译过来是图元的意思，但是它不是基类，只是图元的一种，起作用是用来绘制各种几何体。
图元是一类对象绘制的集合，可以包含多个WebGL的drawcall。

整个CesiumWidget的结构如下所示：

Cesium快速上手1-CesiumWidget-Scene结构相关推荐

Cesium快速上手10-Viewer/Entities组合
Cesium快速上手10-Viewer/Entities组合 const viewer = new Cesium.Viewer("cesiumContainer"); http:/ ...
快速上手Django(一) 项目结构、开发环境、开发流程、视图、视图集
文章目录一.Django 基础 1. django 项目的目录结构 2. 开发环境(Pycharm 启动django) 1)先找到mange.py 2)项目配置远程python解释器 3)点击`ed ...
快速上手Flask(一) 认识框架Flask、项目结构、开发环境
文章目录快速上手Flask(一) 认识框架Flask.项目结构.开发环境 Web开发轻量级框架Flask Flash历史和团队 Pallets 项目 flask运行过程使用flask的场景使用P ...
Cesium快速入门
Cesium是全世界使用最广泛的3D WebGIS引擎.国内有若干个GIS厂家的3D GIS引擎也是基于Cesium进行开发.随着国家"新基建.数字化"战略的不断发展深化,越来越多 ...
【Three.js】Three.js快速上手教程
1. Three.js简介官网对 Three.js 的介绍非常简单:"Javascript 3D library". 即:three.js是JavaScript编写的WebGL第 ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
『转载』Debussy快速上手（Verdi相似）
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
Tensorflow 10分钟快速上手
Tensorflow 快速上手系统版本 : Ubuntu 16.04LTS Python版本 : 3.6.1 Tensorflow 版本 : 1.0.1 本文依据教程 TensorFlow Tuto ...
上传文件微信小程序input_快速上手微信小程序UI框架
本课程属于微信小程序 A计划,不单独售卖,加入 A 计划可免费观看本课程及所有微信小程序收费课程~ 微信小程序 A计划永久有效期购买链接: http://www.sikiedu.com/clas ...

Cesium快速上手1-CesiumWidget-Scene结构

Cesium快速上手1-CesiumWidget-Scene结构

1. CesiumWidget才是核心类

2. Scene中装载了所有的三维对象

3. 图元类对应一个三维渲染对象

Cesium快速上手1-CesiumWidget-Scene结构相关推荐

最新文章

热门文章