css和js3d粒子,升级版ThreeJS 3D粒子波浪动画

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