升级版ThreeJS 3D粒子波浪动画
效果图
升级版demo 2：改变粒子的形状
demo 2
升级版demo 1：改变粒子大小，颜色
demo 1
ThreeJS官方示例：https://threejs.org/examples/#canvas_particles_waves
ThreeJS官方示例
原版粒子动画的JS部分也就一百多行代码吧，看明白不难。尽管如此，在实现想要的效果，尤其是demo 2的过程中，仍遇到了不少问题，甚至一度以为无法实现。好在最终都找到了解决办法，完美实现了需求。
这篇文档将介绍实现这两个demo时需要注意的一些关键点，遇到的一些问题和解决办法。
Three.js版本：r90
升级版demo 1
创建粒子的思路：定义一种 Material，然后作为参数传递到粒子构造函数中。
new THREE.Sprite( material )
改变粒子颜色/大小
Material 是什么呢？它描述物体的外观。
因此，要改变粒子颜色或者大小，从Material着手。在Three.js 版本更新过程中，Material 种类也发生了一些变化。旧版本支持的 Material 在新版本中不一定可以使用，这一点在文档后面部分详细说。
粒子波浪示例使用了SpriteCanvasMaterial 来创建粒子材质，其 API定义 如下：
Create a material that can draw custom sprites using a 2d canvas.
构造函数可接受两个参数。如何修改粒子颜色大小一目了然。
var material = new THREE.SpriteCanvasMaterial( {
color: 0xffffff, //粒子的颜色
program: function ( context ) { //用于绘制粒子的方法
context.beginPath();
context.arc( 0, 0, 0.5, 0, PI2, true ); //画一个圆形。此处可修改大小。
context.fill();
}
} );
只改变部分粒子
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i ++ ] = new THREE.Sprite( material ); //修改此处的material参数
particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
scene.add( particle );
}
}
升级版demo 2
改变粒子形状
根据上一个demo，我们可以大胆设想，要改变粒子形状，只需要修改THREE.SpriteCanvasMaterial 方法中的program参数。没错，思路正确。
比如我们绘制正方形粒子：
var material = new THREE.SpriteCanvasMaterial ({
color: "orange", //粒子的颜色
program: function(context) { //用于绘制粒子的方法
context.fillRect(0, 0, 2, 2); //绘制一个正方形
}
});
效果如下：
正方形粒子波浪.png
然而，当我们挪动鼠标的时候，相机角度变化，就会发现一个很严重的问题：
画布上会出现残影。
残影.png
非常惨烈。
这个问题卡了我好久，最初以为是ThreeJS的问题，后来才发现其实是我使用不当。参考这个问题 three.js canvas wont clear - particle/sprite trails 以及 issue#4418 。尤其是这两段话：
讨论1
讨论2
也就是说，粒子必须在1x1的区域内绘制。超出这个区域就会出现上面的残影问题，因为超出部分无法被及时清除。比如上面的橙色正方形，设置的边长是 2px，就出问题了。
那如果要绘制大一些的粒子呢？思路是，program 方法中在1 x 1 的区域内绘制粒子，之后再把粒子放大（scale），也就是修改particle.scale.x ， particle.scale.y ， particle.scale.z 这三个变量。
demo 2中对应的代码：
绘制粒子形状：
var material2 = new THREE.SpriteCanvasMaterial ({
color: '#F28321', //粒子的颜色
program: function(context) { //用于绘制粒子的方法
context.beginPath();
//绘制渐变色的矩形
var lGrd = context.createLinearGradient(-0.008,0.25,0.016,-0.25);
lGrd.addColorStop(0, '#F28321');
lGrd.addColorStop(1, 'transparent');
context.fillStyle = lGrd;
context.fillRect(-0.008,0.25,0.016,-0.25); //注意此处的坐标大小
//绘制底部和顶部圆圈
context.fillStyle = "#F28321";
context.arc(0, 0, 0.008, 0, PI2, true); //绘制底部圆圈
context.arc(0, 0.25, 0.008, 0, PI2, true); //绘制顶部圆圈
context.fill();
context.closePath();
//绘制顶部渐变色光圈
var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);
rGrd.addColorStop(0, 'transparent');
rGrd.addColorStop(1, 'rgba(242,131,33,0.28)');
context.fillStyle = rGrd;
context.arc(0, 0.25, 0.025, 0, PI2, true); //绘制一个圆圈
context.fill();
}
});
放大粒子：
//更新粒子的位置和大小
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++];
//更新粒子位置
particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
//更新粒子大小
particle.scale.x = particle.scale.y = particle.scale.z = ( (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4 )*100; //正常情况下再放大100倍
}
}
ThreeJS版本
在这个demo中，ThreeJS的版本很重要。一开始我使用的不是官网的例子（http://www.css88.com/archives/5996/comment-page-1），其中ThreeJS 版本是 r56。
然而代码中用到的 ParticleCanvasMaterial 和 Particle 在ThreeJS r62及更新版本中已经被移除了。会出现以下问题：
Uncaught TypeError: THREE.ParticleCanvasMaterial is not a constructor
THREE.Particle has been renamed to THREE.Sprite.
因此要留心ThreeJS的版本，以及其升级指南 。
在React中使用ThreeJS
正常情况下，可以按照官方文档中介绍的如何导入ThreeJS模块来操作：https://threejs.org/docs/index.html#manual/introduction/Import-via-modules
但是，在这个粒子波浪实例中，要用到 js/renderers/Projector.js 和 js/renderers/CanvasRenderer.js 。先导入ThreeJS模块，再使用 require 加载前两个文件。仍然行不通。
最后的解决办法是，在HTML中引用 ThreeJS 的 .min.js文件。然后在对应组件中使用 require 加载那两个js文件。
或许有更好的办法，还需要调研。参考话题：
Can't use CanvasRenderer or Projector when I'm using Three from npm : https://github.com/mrdoob/three.js/issues/10617
transform examples/js to support modules : https://github.com/mrdoob/three.js/issues/9562
发表评论 (审核通过后显示评论)：