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 相关文章推荐
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
原生JavaScript实现换肤
Feb 19 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
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
JS实现的视频弹幕效果示例
2018/08/17 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python3处理word文档实例分析
2020/12/01 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
优秀员工自荐书
2013/12/19 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
运动会标语
2014/06/21 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
信访维稳工作汇报
2014/10/27 职场文书
丧事答谢词
2015/01/05 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
小学运动会加油稿
2015/07/22 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript