THREE.JS入门教程(4)创建粒子系统


Posted in Javascript onJanuary 24, 2013

译序
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
0.简介
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
1.创建一个粒子系统
Three.js将粒子系统视为一个基本的几何体,因为它就像基本几何体一样,即有形状,又有位置、缩放因子、旋转属性。粒子系统将geometry对象里的每一个点视为一个单独的粒子。为什么这样做?我想基于以下的原因:首先,整个粒子系统地绘制只需要调用一次某个绘制函数,而不是调用上千次;其次,这允许你设定一些全局的参数来影响你的粒子系统内的所有粒子。

即使是粒子系统被视为一个整体的对象,我们仍然可以为每个粒子单独地着色,因为在绘制粒子系统的过程中,Three.js通过attribute变量colour向着色器传递了每一个顶点的颜色。我在本篇教程里并不准备这样做,如果你想知道这是怎样完成的,你可以去GitHub上看Three.js的例程。

粒子系统可能还有一种特殊效果需要引起你的注意:Three.js在粒子系统第一次被渲染的时候,会将其数据缓存下来,之后你无法增加或减少系统中的粒子。如果你不希望看到某个粒子,你可以将它的颜色中的alpha值设置为0,但你无法删除它。所以你应当在创建粒子系统的时候,就将所有可能需要显示的粒子考虑进来。
开始创建一个粒子系统,只需要这么多

// 创建粒子geometry 
var particleCount = 1800, 
particles = new THREE.Geometry(), 
pMaterial = 
new THREE.ParticleBasicMaterial({ 
color: 0xFFFFFF, 
size: 20 
}); 
// 依次创建单个粒子 
for(var p = 0; p < particleCount; p++) { 
// 粒子范围在-250到250之间 
var pX = Math.random() * 500 - 250, 
pY = Math.random() * 500 - 250, 
pZ = Math.random() * 500 - 250, 
particle = new THREE.Vertex( 
new THREE.Vector3(pX, pY, pZ) 
); 
// 将粒子加入粒子geometry 
particles.vertices.push(particle); 
} 
// 创建粒子系统 
var particleSystem = 
new THREE.ParticleSystem( 
particles, 
pMaterial); 
// 将粒子系统加入场景 
scene.addChild(particleSystem);

如果你运行
1.你会发现粒子都是方的
2.粒子都不动
我们一个一个来修复。
2.风格
我们创建一个粒子基本材质时传入了颜色和尺寸。我们可能想做的是传入一张纹理图片用来显示粒子,而这样就可以很好地控制粒子看上去的样式了。

你也看到,粒子是以方块形状绘制的,所以我们也应当使用一张方形的纹理图片。为了看上去效果更好,我还会使用加法混合,但是这样做必须保证纹理图片的背景是黑色的而不是透明的。我理解的原因是:现在加法混合和透明材质之间不兼容。但是没关系,最后看上去会很棒。

我们来更新一下粒子基本材质和粒子系统,加入一些加法混合下透明的粒子。如果你喜欢,你也可以用我的粒子图片。

// 创建粒子基本材质 
var pMaterial = 
new THREE.ParticleBasicMaterial({ 
color: 0xFFFFFF, 
size: 20, 
map: THREE.ImageUtils.loadTexture( 
"images/particle.png" 
), 
blending: THREE.AdditiveBlending, 
transparent: true 
}); 
// 允许粒子系统对粒子排序,以达到我们想要的效果 
particleSystem.sortParticles = true;

这看上去已经好多了。现在来引入一点物理,让粒子们动起来。
3.引入物理
默认情况下,粒子系统在三维空间中不运动,这很好。但我想让他们动起来,而且我要让粒子系统这样运动:让粒子绕着y轴旋转。而且粒子在每个轴的范围都在-250到250之间,所以绕着y轴旋转以为这它们绕着系统地中心旋转。

我还假定,你已经在某个地方有了帧循环的代码,和我在上一篇关于着色器中的教程中类似。所以这里我们只需这样:

// 帧循环 
function update() { 
// 增加一点旋转量 
particleSystem.rotation.y += 0.01; 
// 绘制粒子系统 
renderer.render(scene, camera); 
// 设置下一次刷新帧时对update的调用 
requestAnimFrame(update); 
}

现在我们开始定义单个粒子的运动(译者注:之前的旋转是整个粒子系统的运动)。我们来做个简单的雨点效果,这包含一下几步
1.给每一个粒子赋一个初始为0的速度
2.在每一帧中,为每一个粒子赋一个随机的重力加速度
3.在每一帧中,通过通过加速度更新速度,通过速度更新位置
4.当一个粒子运动出了视线,重新设置初始位置和速度
听上去很多,其实代码写起来很少。首先,在创建粒子的过程中,我们为每个粒子增加一个水平速度:
// 为每个粒子创建一个水平运动速度 
particle.velocity = new THREE.Vector3( 
0, // x 
-Math.random(), // y: 随机数 
0); // z

接下来,在帧缓冲中我们传递每个粒子,并且,当粒子离开屏幕底部需要重置时,重置其位置和速度。
// 帧循环 
function update() { 
// 增加旋转量 
particleSystem.rotation.y += 0.01; 
var pCount = particleCount; 
while(pCount--) { 
// 获取单个粒子 
var particle = particles.vertices[pCount]; 
// 检查是否需要重置 
if(particle.position.y < -200) { 
particle.position.y = 200; 
particle.velocity.y = 0; 
} 
// 用随机数更新水平速度分量,并根据速度更新位置 
particle.velocity.y -= Math.random() * .1; 
particle.position.addSelf( 
particle.velocity); 
} 
// 告诉粒子系统我们改变了粒子位置 
particleSystem.geometry.__dirtyVertices = true; 
// 画 
renderer.render(scene, camera); 
// 设置下一次调用 
requestAnimFrame(update); 
}

虽然不够震撼,但这个粒子至少展示了如何做。你完全应该自己创建一些美妙的粒子效果,然后让我知道。
这里有个警告你应该知道,在帧循环中,我越雷池了:我在一次循环中遍历了所有粒子,这实际上是种很粗放的方式。如果你的帧循环中做了太多的工作(译者注:注意帧循环的js代码是在cpu中运行的,它不像gpu,能一下子并发出成千上万个简单进程),浏览器就会卡顿,事实上如果你用了requestAnimationFrame,它视图每秒刷新60次。所以还是优化你的代码,在帧循环中做尽量少的事情。
4.小结
粒子效果太棒了,是个人都爱粒子效果,而现在你知道如何在Three.js中加入粒子效果了。我希望你能用得顺手,就跟前面一样!
同样,这里有源码下载,而且,让我知道你喜欢它!
Javascript 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 #Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 #Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 #Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 #Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 #Javascript
You might like
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
js arguments对象应用介绍
2012/11/28 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
python单例模式实例分析
2015/04/08 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python中管道用法入门实例
2015/06/04 Python
Python实现控制台进度条功能
2016/01/04 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python获取本机所有IP地址的方法
2018/12/26 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python 如何对文件目录操作
2020/07/10 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
学籍证明模板
2015/06/18 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL