基于threejs的图片雪花飘落效果,不需要安装额外插件。
点击这里查看效果。
PictureSnowflakesFalling
│ index.html //主页面
│ README.md //说明文档
├─img //图片文件夹
│ bg.png //背景图
│ cake.png //飘落图片
├─js //JavaScript
│ Snow.js
│ ThreeCanvas.js
└─resources //其他资源
bg.jpg
ParticleSmoke.png
直接运行index.html
即可,不要更改文件目录结构。
-
修改背景图:修改
index.html
第12行代码:background: url(img/bg.png) repeat-x;
可以更改
repeat
方式。 -
修改飘落图片:修改
index.html
第49行代码:particleImage.src = 'img/cake.png';
建议使用透明背景的png图片,并调整好大小(建议在100*100以内)。
-
修改网页标题:修改
title
标签(index.html
第7行代码):<title>图片雪花飘落特效</title>
将背景和飘落图片更改为resources/bg.jpg
和resources/ParticleSmoke.png
,即为原版雪花飘落效果。