test2 = viewer.entities.add({
name: '红色球体',
id: "create-" + id,
position: Cesium.Cartesian3.fromDegrees(latCenter, lngCenter, height * 1000),
ellipsoid: {
radii: new Cesium.Cartesian3(radius * 1000, radius * 1000, radius * 1000),
material: Cesium.Color.RED.withAlpha(0.5), /* 测试好几个颜色方法的接口,只有它可以,限制很大*/
outline: true,
outlineColor: Cesium.Color.BLACK,
}
})
//采用迂回的方法动态更改对象颜色
test2._ellipsoid.material = new Cesium.Color(str[0] / 255, str[1] / 255, str[2] / 255, 1)
闻道有先后,术业有专攻。致力于开源,奈何探索精神太差,尽量把走过的坑圈给后面走的人。
为方便快速测试 Cesium Demo使用,添加了一些演示demo并且提供了webpack打包的示例。目前整理了20个demo,后面会对demo进行讲解。
详情源码连接:
Cesium 50个实例集合,讲解、分析(内附源码)
示例概要说明:
1.Draw.js 动态绘制 点、线、面
2.Scanning.js 一个简单的扫描功能
3.Spline.js 样条插值
4.HeightProperty.js 一个类似淹没分析的效果
5.VectorTile.js 矢量切片加载
6.Ellipsoids.js 圆特效
7.Sensor.js 传感器,可设置角度,位置等
8.PolylineArrow.js 动态线效果
9.VolumesCZML.js 加载czml文件 支持传感器等动画特效
10.VolumesApi.js VolumesApi 调用效果
11.Fly.js 绕点飞行
12.Radar.js 气象雷达动态图
13.VisibleAnalysis.js 通视分析
14.EagleEye.js 鹰眼地图
15.Measure.js 测量
16.Translucency.js 地球半透明,可做地下管线、矿山项目
17.Interior.js 地球内部,结合VectorTile.js会出很牛的效果
18.3dtiles加载
19.可视域分析_3DTiles
20.站心坐标转WGS84
*** 作说明:
1.npm初始化第三方库
npm install
2.在根目录创建文件夹,文件夹名称为“ThirdParty” 。
3.将根目录下“node_modules\cesium\Build\Cesium”拷贝到“ThirdParty” 下。
4.编译
npm run build
5.运行
npm run start
注:可以不要“2”、“3”步骤的,只是为了初学者能更快的找到源码位置。
我们从下面图片去观察cesium是怎样执行primitive的渲染命令的
1,初始化cesium场景时候会默认执行CesiumWidget类里面的startRenderLoop方法,该方法的作用是
调用浏览器requestAnimationFrame方法循环执行widget.render方法进行渲染,我们再看看
CesiumWidget里面的rander方法,这个方法调用了scene.initializeFrame()进行初始化一帧,Clock.tick()方法触发时钟更新当前时间,Scene.render方法进行渲染。我们再看看Scene.render方法
该方法大致做了以下几件事,更新帧数,预先更新3dtiles数据,预先更新相机飞行的3dtiles数据,调用render方法等
我们看看Scene.render方法,该方法内部调用Scene.updateAndExecuteCommands方法
Scene.prototype.updateAndExecuteCommands方法根据frameState.mode变量判断是否是3d场景然后执行executeCommandsInViewport方法渲染视口内的图元,
调用Scene类里的executeCommands方法执行绘制命令
executeCommands方法内先执行和环境相关的,例如天空盒,太阳,月亮等渲染指令。
接着根据遍历视锥体数组,依次执行单个视锥体的渲染命令。
先Pass.GLOBE(椭球体),接着Pass.TERRAIN_CLASSIFICATION(贴地形),接着Pass.CESIUM_3D_TILE(3dtiles),Pass.CESIUM_3D_TILE_CLASSIFICATION(贴着3dtiles),接着Pass.CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW,接着Pass.OPAQUE(不透明的),Pass.TRANSLUCENT(透明的),Pass.OVERLAY(遮盖物)
然后会触发DrawCommand.prototype.execute方法
进入Centext.draw方法
该方法先设置帧缓冲区,渲染状态,uniform变量,然后调用beginDraw方法
在beginDraw方法绑定帧缓冲区,应用渲染状态(例如开启深度测试,模板测试,混合等),绑定着色程序,并限制最大纹理单元数量。
然后执行continueDraw方法
设置模型矩阵,设置uniform变量,绑定顶点数组,根据绘制的实例数量和是否有顶点索引来决定使用context._gl.drawElements,context.glDrawElementsInstanced,context._gl.drawArrays,context.glDrawArraysInstanced其中一种方法
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)