升级版ThreeJS 3D粒子波浪动画

2020-04-12 23:07:22 1307 编程开发

效果图

升级版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