本文档介绍了如何使用ThreeJS创建3D粒子波浪动画，包括升级版的粒子大小和颜色变化，以及解决在改变粒子形状时出现的残影问题。通过修改SpriteCanvasMaterial的program参数，并调整粒子大小，实现了不同形状的粒子效果。同时，文章提到了ThreeJS版本兼容性和在React中使用ThreeJS的注意事项。
升级版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
最低0.47元/天 解锁文章
扫一扫
4549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
