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

2019-12-03 本文已影响0人 Evelynzzz

效果图

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