// 为每个粒子创建一个水平运动速度
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中加入粒子效果了。我希望你能用得顺手，就跟前面一样！
同样，这里有源码下载，而且，让我知道你喜欢它！
您可能感兴趣的文章: