Cesium 实现粒子效果贴地(伪)

Posted on 2018-09-14 10:15  Ghost_In_the_Shell  阅读(777)  评论(0编辑  收藏  举报

有时我们面对这样的需求,需要在地面上放一个周期性放大缩小的标记,可以使用粒子效果实现,但是粒子效果图片很难贴地(如果你知道怎么做,欢迎分享,期待有人打我脸),我只能变通实现一个看似贴地但实际没有贴地的效果。原理就是粒子图像的长度随着摄影机角度变化而变化,而宽度不变,这样当角度接近垂直时,图像就会更“圆”,接近平行时则更“扁”,看似贴到了地表上。

不多说 看代码

 1 var viewModel = {
 2             height : 20,
 3             width : 20
 4         };
 5         var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 6             image : '<粒子图像>',
 7             startScale : 1.0,
 8             endScale : 10.0,
 9             minimumLife : 2.0,
10             maximumLife : 1.0,
11             speed : 0.0,
12             width : viewModel.width,
13             height : viewModel.height,
14             lifeTime : 1.0,
15             // 主模型参数(位置)
16             modelMatrix : modelMatrix,
17             // 发射器参数
18             emitter : new Cesium.CircleEmitter(0.5),
19             rate : 1,
20             // 颜色
21             startColor: Cesium.Color.WHITE.withAlpha(0.7),
22             endColor: Cesium.Color.RED.withAlpha(0.01),
23             forces: [applyGravity]
24         }));
25         // 伪贴地
26         viewer.camera.moveStart.addEventListener(function(){
27             var pitch = viewer.camera.pitch;
28             var verticalView = Cesium.Math.toRadians(-90.0);
29             // 1.25是个比例参数,我觉得看上去更真实
30             particleSystem._maximumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
31             particleSystem._minimumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
32         });
33         viewer.camera.moveEnd.addEventListener(function(){
34             var pitch = viewer.camera.pitch;
35             var verticalView = Cesium.Math.toRadians(-90.0);
36             particleSystem._maximumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
37             particleSystem._minimumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
38         });