cesium 和 Three.js有什么区别,以及二者与WebGL 的关系

JavaScript024

cesium 和 Three.js有什么区别,以及二者与WebGL 的关系,第1张

二者都是基于WebGL技术开发的js库

Threejs受众面比较广,是封装了webgl的一些底层用法,让初学者更容易上手;例如绘制一个立方体,使用webgl原生api可能要写50行代码,包括构建坐标点,顶点组织、着色器等信息;在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api),只是做了更大粒度的封装

Cesium受众面相对较小,是Gis相关的,也是基于WebGL开发的,它主要是三维地球相关的js库,可以展示二维地图服务(百度高德)、倾斜摄影模型;还可以在上面做一些三维分析,可以参考http://cesium.xin

可能很多同学会发现,学习Three.js的API非常容易,但是真正理解API的作用却非常难。其实让大家感到难的并不是Three.js本身,而是Three.js背后所隐藏的3D图形学知识。本系列Three.js源码解读文章,会帮你一边补齐3D图形学的基础知识,一边真正理解到Three.js的实现原理,知其然,知其所以然。

Object3D是ThreeJS中大部分物体的基类,它包含了物体的位移,旋转,缩放,以及各个物体父子关系的js实现。选取Object3D几个重要的属性做解释:

一个3D对象往往由多个父子对象组成,父对象的位移, 旋转, 缩放会传递给所有的子对象。

this.parent指向父对象,this.children包含了所有的子对象。

通过 add 为物体添加子对象。需要注意的是,如果该子对象有其他的父对象,会先解除子对象和旧的父对象的父子关系,然后将子对象添加到新的父对象中。

this.matrix表示物体自身的本地形变,this.matrixWorld表示物体的全局形变。当物体没有父对象时,全局形变就是本地形变。

为什么对象组合这么重要呢?看下面的例子:

这两个立方体共同组成了一个3D对象,下面的立方体为底座,上面的立方体为操作臂。当底座转动的时候,操作臂会同样转动,所以操作臂的形变会传递给底座。当操作臂旋转时,底座不会被影响。

这里,底座就是操作臂的父对象。只要简单的将底座的全局形变(this.parent.matrixWorld)和操作臂的本地形变(this.matrix)相乘,就能得到操作臂的最终形变。是不是很方便?

3D物体的位移,旋转,缩放都可以通过矩阵表示。其中,旋转除了通过矩阵,还可以通过欧拉角和四元数表示。

Object3D的rotation代表物体旋转的欧拉角表示,quaternion代表了四元数表示,他们是3D物体统一旋转的不同数学表达方式。(矩阵,欧拉角,四元数表示旋转

onRotationChange , onQuaternionChange 这两个回调用于同步欧拉角和四元数,保证他们代表着相同的旋转角度。

3D交互一个很大一部分工作量是需要在物体的本地空间( this.matrix )和世界空间( this.matrixWorld )进行坐标转换。

用three.js展示3D模型是需要具备JS开发能力的。如果不具备JS开发能力,那就只能使用基于WebGL(或three.js)的制作平台或软件,就像使用Blender、3DMax那样直接画,这样的平台/软件不多,BlenderForWeb是一个,还有一个交互式三维创作平台,直接画就可以做出下图的效果,特别是支持定义交互。