Cesium 实现粒子效果贴地(伪)
有时我们面对这样的需求,需要在地面上放一个周期性放大缩小的标记,可以使用粒子效果实现,但是粒子效果图片很难贴地(如果你知道怎么做,欢迎分享,期待有人打我脸),我只能变通实现一个看似贴地但实际没有贴地的效果。原理就是粒子图像的长度随着摄影机角度变化而变化,而宽度不变,这样当角度接近垂直时,图像就会更“圆”,接近平行时则更“扁”,看似贴到了地表上。
不多说 看代码
var viewModel = {
height : 20,
width : 20
};
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
image : '<粒子图像>',
startScale : 1.0,
endScale : 10.0,
minimumLife : 2.0,
maximumLife : 1.0,
speed : 0.0,
width : viewModel.width,
height : viewModel.height,
lifeTime : 1.0,
// 主模型参数(位置)
modelMatrix : modelMatrix,
// 发射器参数
emitter : new Cesium.CircleEmitter(0.5),
rate : 1,
// 颜色
startColor: Cesium.Color.WHITE.withAlpha(0.7),
endColor: Cesium.Color.RED.withAlpha(0.01),
forces: [applyGravity]
}));
// 伪贴地
viewer.camera.moveStart.addEventListener(function(){
var pitch = viewer.camera.pitch;
var verticalView = Cesium.Math.toRadians(-90.0);
// 1.25是个比例参数,我觉得看上去更真实
particleSystem._maximumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
particleSystem._minimumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
});
viewer.camera.moveEnd.addEventListener(function(){
var pitch = viewer.camera.pitch;
var verticalView = Cesium.Math.toRadians(-90.0);
particleSystem._maximumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
particleSystem._minimumHeight = viewModel.width * 1.25 * ( pitch / verticalView );
});
Cesium 实现粒子效果贴地(伪)的更多相关文章
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...
- 简直要逆天!超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
- CodePen 作品秀:Canvas 粒子效果文本动画
作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...
- iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果
一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...
- 能产生粒子效果的CAEmitterLayer
能产生粒子效果的CAEmitterLayer 下雪效果: // // RootViewController.m // Cell // // Copyright (c) 2014年 Y.X. All r ...
- cocos基础教程(8)粒子效果
简介 粒子系统是指计算机图形学中模拟特定现象的技术,它在模仿自然现象.物理现象及空间扭曲上具备得天独厚的优势,为我们实现一些真实自然而又带有随机性的特效(如爆炸.烟花.水流)提供了方便. 粒子属性 一 ...
- 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...
- iOS 开发之粒子效果
本文由糖炒小虾.Benna翻译 ,校对:sai.u0u0.iven.子龙山人 iOS 5中的UIKit粒子系统教程 Ray的话:这是第15篇.也是最后一篇<iOS 5 盛宴>中的iOS 5 ...
- cocos2d粒子效果
第9章 粒子效果 游戏开发者通常使用粒子系统来制作视觉特效.粒子系统能够发射大量细小的粒子并对他们进行渲染,而且效率要远高于渲染同样数目的精灵.粒子系统可以模拟下雨.火焰.雪.爆炸.蒸气拖尾以及其他多 ...
随机推荐
- vue项目中解决type=”file“ change事件只执行一次的问题
问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...
- C/C++ 数据结构之算法
数据结构中的排序算法. 排序算法的相关知识: (1)排序的概念:所谓排序就是要整理文件中的记录,使之按关键字递增(或递减)次序排列起来. (2)稳定的排序方法:在待排序的文件中,若存在多个关键字相同的 ...
- @component @bean区别
from: http://stackoverflow.com/questions/10604298/spring-component-versus-bean http://stackoverflow. ...
- knockout + easyui = koeasyui
在做后台管理系统的同学们,是否有用easyui的经历.虽然现在都是vue.ng.react的时代.但easyui(也就是jquery为基础)还是占有一席之地的.因为他对后端开发者太友好了,太熟悉不过了 ...
- iOS推送:Java服务器端发送表情(绘文字)
http://blog.csdn.net/musou_ldns/article/details/8692520 功能的时候,客户要求能够给iphone发送表情图标,也就是绘文字. 手机环境:iOS5. ...
- mac上如何解压和压缩rar文件
许多喜欢mac的人都知道,这个os没有像win上winRAR或者hao123解压等类似软件,对于文件的压缩和解压很不方便,在下载rar的文件包之后就会束手无策,很是尴尬至极,为了避免这种情况,自己动手 ...
- 如何修改Tomcat默认端口?
修改的原因: 关于8080端口:8080端口同80端口,是被用于WWW代理服务的,可以实现网页浏览,经常在访问某个网站或使用代理服务器的时候,会加上":8080"端口号.另外Apa ...
- bzoj 2428 均分数据 模拟退火
模拟退火 按照自己的思路打了,结果WA,发现退火最关键的就是初温,降温,和修改次数, 这个题还在外层带了一个循环,骚气 #include<cstdio> #include<iostr ...
- BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配
BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若 ...
- js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...