特效描述：html5 3D飄落雪花動畫。雪花動畫

代碼結構

1. 引入JS

2. HTML代碼

雪花飄落場景特效

body { margin: 0; padding: 0; position: relative; background-image: url(images/xh.jpg); background-position: center; /*background-repeat: no-repeat;*/ width: 100%; height: 100%; background-size: 100% 100%; }

var SCREEN_WIDTH = window.innerWidth;//

var SCREEN_HEIGHT = window.innerHeight;

var container;

var particle;//粒子

var camera;

var scene;

var renderer;

var starSnow = 1;

var particles = [];

var particleImage = new Image();

//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );

particleImage.src = 'images/ParticleSmoke.png';

function init() {

//alert("message3");

container = document.createElement('div');//container：畫布實例;

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );

camera.position.z = 1000;

//camera.position.y = 50;

scene = new THREE.Scene();

scene.add(camera);

renderer = new THREE.CanvasRenderer();

renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

//alert("message2");

for (var i = 0; i < 500; i++) {

//alert("message");

particle = new Particle3D( material);

particle.position.x = Math.random() * 2000-1000;

particle.position.z = Math.random() * 2000-1000;

particle.position.y = Math.random() * 2000-1000;

//particle.position.y = Math.random() * (1600-particle.position.z)-1000;

particle.scale.x = particle.scale.y = 1;

scene.add( particle );

particles.push(particle);

}

container.appendChild( renderer.domElement );

//document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'touchstart', onDocumentTouchStart, false );

document.addEventListener( 'touchmove', onDocumentTouchMove, false );

document.addEventListener( 'touchend', onDocumentTouchEnd, false );

setInterval( loop, 1000 / 60 );

}

var touchStartX;

var touchFlag = 0;//儲存當前是否滑動的狀態;

var touchSensitive = 80;//檢測滑動的靈敏度;

//var touchStartY;

//var touchEndX;

//var touchEndY;

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();//取消默認關聯動作;

touchStartX = 0;

touchStartX = event.touches[ 0 ].pageX ;

//touchStartY = event.touches[ 0 ].pageY ;

}

}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

var direction = event.touches[ 0 ].pageX - touchStartX;

if (Math.abs(direction) > touchSensitive) {

if (direction>0) {touchFlag = 1;}

else if (direction<0) {touchFlag = -1;};

//changeAndBack(touchFlag);

}

}

}

function onDocumentTouchEnd (event) {

// if ( event.touches.length == 0 ) {

// event.preventDefault();

// touchEndX = event.touches[ 0 ].pageX ;

// touchEndY = event.touches[ 0 ].pageY ;

// }這里存在問題

var direction = event.changedTouches[ 0 ].pageX - touchStartX;

changeAndBack(touchFlag);

}

function changeAndBack (touchFlag) {

var speedX = 25*touchFlag;

touchFlag = 0;

for (var i = 0; i < particles.length; i++) {

particles[i].velocity=new THREE.Vector3(speedX,-10,0);

}

var timeOut = setTimeout(";", 800);

clearTimeout(timeOut);

var clearI = setInterval(function () {

if (touchFlag) {

clearInterval(clearI);

return;

};

speedX*=0.8;

if (Math.abs(speedX)<=1.5) {

speedX=0;

clearInterval(clearI);

};

for (var i = 0; i < particles.length; i++) {

particles[i].velocity=new THREE.Vector3(speedX,-10,0);

}

},100);

}

function loop() {

for(var i = 0; i

var particle = particles[i];

particle.updatePhysics();

with(particle.position)

{

if((y

if(x>1000) x-=2000;

else if(x

if(z>1000) z-=2000;

else if(z

}

}

camera.lookAt(scene.position);

renderer.render( scene, camera );

}

總結

以上是生活随笔為你收集整理的html全屏飘雪花特效,html5 3D飘落雪花动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。