HTML5 초현실적인 설경 효과

간략한 튜토리얼

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 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!