HTML5超逼真下雪場景效果

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:36:44

HTML5超逼真下雪場景效果

HTML5超逼真下雪場景效果:簡要教程這是一款基于jquery的超逼真下雪場景特效。該特效使用jquery代碼來動態(tài)插件html5 canvas元素，然后在canvas中制作下雪特效。使用方法在頁面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。<script src=&quo

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀HTML5超逼真下雪場景效果:簡要教程這是一款基于jquery的超逼真下雪場景特效。該特效使用jquery代碼來動態(tài)插件html5 canvas元素，然后在canvas中制作下雪特效。使用方法在頁面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。<script src=&quo

簡要教程

這是一款基于jquery的超逼真下雪場景特效。該特效使用jquery代碼來動態(tài)插件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({
 //創(chuàng)建粒子數(shù)量，密度
 particleNo: 500,
 //粒子下落速度
 particleSpeed:30,
 //粒子在垂直（Y軸）方向運(yùn)動范圍
 particleY_Range:1300,
 //粒子在垂直（X軸）方向運(yùn)動范圍
 particleX_Range:1000,
 //是否綁定鼠標(biāo)事件
 bindMouse: false,
 //相機(jī)離Z軸原點(diǎn)距離
 zIndex:600,
 //攝像機(jī)視野角度
 angle:55,
 wind_weight:0
});

配置參數(shù)

particleNo：創(chuàng)建粒子數(shù)量，密度。

particleSpeed：粒子下落的速度。

particleY_Range：粒子在垂直（Y軸）方向運(yùn)動范圍。

particleX_Range：粒子在垂直（X軸）方向運(yùn)動范圍。

bindMouse：是否綁定鼠標(biāo)事件。

zIndex：相機(jī)離Z軸原點(diǎn)距離。

angle：角度。

wind_weight：風(fēng)的等級。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com