译序 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，但你无法删除它。所以你应当在创建粒子系统的时候，就将所有可能需要显示的粒子考虑进来。 开始创建一个粒子系统，只需要这么多： 如果你运行： 1.你会发现粒子都是方的 2.粒子都不动 我们一个一个来修复。 2.风格 我们创建一个粒子基本材质时传入了颜色和尺寸。我们可能想做的是传入一张纹理图片用来显示粒子，而这样就可以很好地控制粒子看上去的样式了。 你也看到，粒子是以方块形状绘制的，所以我们也应当使用一张方形的纹理图片。为了看上去效果更好，我还会使用加法混合，但是这样做必须保证纹理图片的背景是黑色的而不是透明的。我理解的原因是：现在加法混合和透明材质之间不兼容。但是没关系，最后看上去会很棒。 我们来更新一下粒子基本材质和粒子系统，加入一些加法混合下透明的粒子。如果你喜欢，你也可以用我的粒子图片。 这看上去已经好多了。现在来引入一点物理，让粒子们动起来。 3.引入物理 默认情况下，粒子系统在三维空间中不运动，这很好。但我想让他们动起来，而且我要让粒子系统这样运动：让粒子绕着y轴旋转。而且粒子在每个轴的范围都在-到之间，所以绕着y轴旋转以为这它们绕着系统地中心旋转。 我还假定，你已经在某个地方有了帧循环的代码，和我在上一篇关于着色器中的教程中类似。所以这里我们只需这样： 现在我们开始定义单个粒子的运动（译者注：之前的旋转是整个粒子系统的运动）。我们来做个简单的雨点效果，这包含一下几步： 1.给每一个粒子赋一个初始为0的速度 2.在每一帧中，为每一个粒子赋一个随机的重力加速度 3.在每一帧中，通过通过加速度更新速度，通过速度更新位置 4.当一个粒子运动出了视线，重新设置初始位置和速度 听上去很多，其实代码写起来很少。首先，在创建粒子的过程中，我们为每个粒子增加一个水平速度： 接下来，在帧缓冲中我们传递每个粒子，并且，当粒子离开屏幕底部需要重置时，重置其位置和速度。 虽然不够震撼，但这个粒子至少展示了如何做。你完全应该自己创建一些美妙的粒子效果，然后让我知道。 这里有个警告你应该知道，在帧循环中，我越雷池了：我在一次循环中遍历了所有粒子，这实际上是种很粗放的方式。如果你的帧循环中做了太多的工作（译者注：注意帧循环的js代码是在cpu中运行的，它不像gpu，能一下子并发出成千上万个简单进程），浏览器就会卡顿，事实上如果你用了requestAnimationFrame，它视图每秒刷新次。所以还是优化你的代码，在帧循环中做尽量少的事情。 4.小结 粒子效果太棒了，是个人都爱粒子效果，而现在你知道如何在Three.js中加入粒子效果了。我希望你能用得顺手，就跟前面一样！ 同样，这里有源码下载，而且，让我知道你喜欢它！
推荐整理分享THREE.JS入门教程(4)创建粒子系统(three.js 教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:three.js 入门,three.js入门指南,three.js入门教程(合集),three.js 教程,three.js入门教程(合集),three.js 教程,three.js入门指南,three.js 教程,内容如对您有帮助，希望把文章链接给更多的朋友！
THREE.JS入门教程(5)你应当知道的十件事 Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍 IE左键是window.event.button=1右键是window.event.button=2中键是window.event.button=4没有按键动作window.event.button=0Firefox左键是event.button=0右键是event.button=2中键是event.b
THREE.JS入门教程(6)创建自己的全景图实现步骤 译序Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好
