HTML5の超リアルな雪景色エフェクト

黄舟
リリース: 2017-01-18 14:11:39
オリジナル
2210 人が閲覧しました

簡単なチュートリアル

これは、jquery に基づいた非常にリアルな雪景色の特殊効果です。この特殊効果は、jquery コードを使用して html5 キャンバス要素を動的にプラグインし、キャンバス内に雪の特殊効果を作成します。

使用方法

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 軸原点の間の距離。

  • 角度: 角度。

  • wind_weight: 風のレベル。

上記は HTML5 の超リアルな雪景色エフェクトの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート