升级版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, //粒子的颜色

本文档介绍了如何使用ThreeJS创建3D粒子波浪动画,包括升级版的粒子大小和颜色变化,以及解决在改变粒子形状时出现的残影问题。通过修改SpriteCanvasMaterial的program参数,并调整粒子大小,实现了不同形状的粒子效果。同时,文章提到了ThreeJS版本兼容性和在React中使用ThreeJS的注意事项。
最低0.47元/天 解锁文章
4564

被折叠的 条评论
为什么被折叠?



