Three.js实现漫天雨滴的效果(粒子)

 时间:2024-10-14 09:07:42

  Three.js是一款开源的主流3D绘图JS引擎(名字Three就是3D的含义),用来简化WebGL编程,也提供了非常多的3D显示功能来实现很多炫酷的实例。  本文利用Three.js的粒子系统实现漫天雨滴的效果,最终效果如下图:

Three.js实现漫天雨滴的效果(粒子)

实现过程

1、  声明变量,详细代码如下图,具体用途说明都已经有备注。

Three.js实现漫天雨滴的效果(粒子)

3、  新建物体(initObject),这一块比较复杂,详细分析如下:  1.先新建几何模型(geo罪焐芡拂m)和设置粒子缺省材质属性(material),里面要注意属性sizeAttenuation,设置为true的时候,雨滴会随距离而发生尺寸衰减(远小、近大),其它属性下图都有详细备注;  2.然后把5000个随机顶点位置的数据(particle)保存到数组中(geom.vertices);  3.最后新建类(cloud),里面包含5000个粒子(模型和材质为第1点设置的数据)。  Tips:velocityY和velocityX影响下落的速度。

Three.js实现漫天雨滴的效果(粒子)
  • 诛仙强化12技巧
  • 如何用itunes同步照片
  • 江湖悠悠怎么装备武学
  • 天涯明月刀缉拿2个人能做么
  • 怎样是制作霜纹包
  • 热门搜索
    北海旅游景点大全 10月份去哪旅游最好 北京故宫旅游攻略 邵武旅游景点大全 香港旅游购物 恒山旅游 邮船旅游 花莲旅游 浙江旅游职业学院地址 怀化旅游网