Cesium官方教程10--高级粒子特效

最新推荐文章于 2025-07-01 10:51:13 发布

转载

最新推荐文章于 2025-07-01 10:51:13 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/14117342/2327173

本文是Cesium官方教程的一部分，讲解如何创建高级粒子特效，包括模拟下雪和下雨。教程介绍了如何使用粒子系统实现下雪和下雨的视觉效果，包括粒子图片的选择、更新函数的编写，以及如何通过改变属性实现不同的天气效果。同时，文章还展示了如何通过调整雾和大气效果来匹配模拟的天气条件。

原文地址：https://cesiumjs.org/tutorials/Particle-Systems-More-Effects-Tutorial/
高级粒子系统特效
这篇教程学习更多的效果，包括天气和火箭推进器。
如果没有学习过粒子系统基础知识，请学习这篇教程粒子系统介绍 .
天气
Cesium官方教程10--高级粒子特效
下雪

下雨

最开始下雪的教程是来自追踪圣诞老人项目里的实现。
步骤
我们即将介绍如何做下雪效果，然后怎么把下雪变为下雨效果。
我们将给每个粒子添加雪花图片，然后在updateParticle函数里定义每个粒子的移动属性和其他动态属性。
粒子图片
关于表示粒子的图片，我们可以从任一纯色（红，绿，白等）图片开始。我们使用png格式，因为它支持透明度，所以透明的部分不可见。在本教程里，下面三张png图片用来创建粒子效果。最左侧的图片用来表示下雨；中间的图片用来表示下雪；右侧的图片我们在上一教程里已经用到了。
Cesium官方教程10--高级粒子特效
粒子图片

一旦我们选定了一张图片，我们可以在Cesium里修改他的外观，后面会解释。比如，左侧圆形粒子图片将会变成前面效果图里长长的，蓝色的更像雨滴。这个火的图片会变成绿色的树叶，×××的电火花，甚至白色的瀑布下面的浪花和泡沫。这里需要创造力。

除此之外，雨雪效果里我们设置了最开始透明度为0，最后透明度为可见性要求的值。也就是说粒子在创建后是完全不透明的。这就是为什么在粒子的生成位置不会突然出现粒子的原因。
更新函数
使用更新函数，我们能更自由的去控制粒子的分布、移动、以及可视化。这里可以简单的修改粒子的颜色、图片大小、生命周期等等。使用这个函数根据你需求或多或少的修改相关属性。甚至在这个函数内部可以基于它和相机的距离修改粒子属性（下面是示例代码），也可以相对某个模型或者地球去计算。
下面是我们的跟新函数代码:

// 下雪
var snowGravityScratch = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
snowGravityScratch = Cesium.Cartesian3.normalize(particle.position, snowGravityScratch);
snowGravityScratch = Cesium.Cartesian3.multiplyByScalar(snowGravityScratch,
Cesium.Math.randomBetween(-30.0, -300.0),
snowGravityScratch);
particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityScratch, particle.velocity);

var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
if (distance > (snowRadius)) {
    particle.endColor.alpha = 0.0;
} else {
    particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
}

};
第一部分代码，使粒子像受重力影响一样的落下。
这个代码还增加一个功能，检测粒子距离相机的距离，距离越远，粒子越模糊（透明度越大），就像一种随距离加重的雾效果。
其他天气效果
除了随着距离渐隐的粒子效果，这个示例还把雾和大气效果设置成匹配我们正在模拟的天气效果。
hueShift 属性控制了光谱颜色（the color along the color spectrum.）。saturationShift 属性控制了实际效果的明暗分界线（how much color versus black and white the visual actually entails）。brightnessShift 属性控制了颜色对比有多强烈（how vivid the colors are）。
雾的密度（density）属性控制了雾颜色覆盖在地球上有多浓厚。minimumBrightness属性设置了雾颜色明亮度的最小值，小于这个值让雾彻底覆盖（acts as a way to darken the fog）。