HTML5超逼真下雪场景效果

来源：懂视网责编：小采时间：2020-11-27 15:36:44

HTML5超逼真下雪场景效果

HTML5超逼真下雪场景效果:简要教程这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素，然后在canvas中制作下雪特效。使用方法在页面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。<script src=&quo

推荐度：

点击下载本文 文档为doc格式

导读HTML5超逼真下雪场景效果:简要教程这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素，然后在canvas中制作下雪特效。使用方法在页面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。<script src=&quo

简要教程

这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素，然后在canvas中制作下雪特效。

使用方法

在页面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。

<script src="path/to/ThreeCanvas.js"></script> 
<script src="path/to/jquery.min.js"></script> 
<script src="path/to/Snow.js"></script> 
<script src="path/to/snowFall.js"></script>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该下雪特效。

$.snowFall({
 //创建粒子数量，密度
 particleNo: 500,
 //粒子下落速度
 particleSpeed:30,
 //粒子在垂直（Y轴）方向运动范围
 particleY_Range:1300,
 //粒子在垂直（X轴）方向运动范围
 particleX_Range:1000,
 //是否绑定鼠标事件
 bindMouse: false,
 //相机离Z轴原点距离
 zIndex:600,
 //摄像机视野角度
 angle:55,
 wind_weight:0
});

配置参数

particleNo：创建粒子数量，密度。

particleSpeed：粒子下落的速度。

particleY_Range：粒子在垂直（Y轴）方向运动范围。

particleX_Range：粒子在垂直（X轴）方向运动范围。

bindMouse：是否绑定鼠标事件。

zIndex：相机离Z轴原点距离。

angle：角度。

wind_weight：风的等级。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com