Three.JS 粒子系统实现雪花飘落动画

原创 智云编程 随笔 前端 85阅读 5 天前 举报

ThreeJS 粒子系统中,THREE.Points是用来创建点的类,也用来批量管理粒子,基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数,geometry(几何体)和material(材质),几何体参数用来设置粒子的位置坐标,而材质参数用来设置粒子的外观。下面利用ThreeJS的粒子系统来实现雪花飘落动画。

1. 寻找素材

1) 背景图片

选择一张雪景图片作为背景图

2) 雪花图片

为了让动画效果更好,使用两种不同形状的雪花实现雪花飘落效果。

2. HTML部分

网页中添加canvas画布所在的元素

3. JS部分

1) 初始化渲染器、场景、摄像机

2) 利用平面几何体添加背景

3) 利用THREE.Points增加雪花粒子

由于使用了两种雪花形状,每一个形状需要创建一个THREE.Points对象

4) 利用requestAnimationFrame实现动画

这里推荐一下我的前端学习交流圈:784783012,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复