html5的canvas实现3d雪花飘舞效果

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

复制具体代码具体代码如下:
var SCREEN_WIDTh = window.innerWidth;
var SCREEN_hEIGhT = window.innerheight; var container; var particle; var camera;
var scene;
var renderer; var mouseX = 0;
var mouseY = 0; var windowhalfX = window.innerWidth / 2;
var windowhalfY = window.innerheight / 2;

var particles = [];
var particleImage = new Image();//ThREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
particleImage.src = 'images/ParticleSmoke.png'; 

function init() { container = document.createElement('div');
document.body.appendChild(container); camera = new ThREE.PerspectiveCamera( 75, SCREEN_WIDTh / SCREEN_hEIGhT, 1, 10000 );
camera.position.z = 1000; 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) } );

for (var i = 0; i < 500; i ) { particle = new Particle3D( material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 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 );

setInterval( loop, 1000 / 60 );

}

function onDocumentMouseMove( event ) { mouseX = event.clientX - windowhalfX;
mouseY = event.clientY - windowhalfY;
} function onDocumentTouchStart( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowhalfX;
mouseY = event.touches[ 0 ].pageY - windowhalfY;
}
} function onDocumentTouchMove( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowhalfX;
mouseY = event.touches[ 0 ].pageY - windowhalfY;
}
} // function loop() { for(var i = 0; i<particles.length; i )
{ var particle = particles[i];
particle.updatePhysics();

with(particle.position)
{
if(y<-1000) y =2000;
if(x>1000) x-=2000;
else if(x<-1000) x =2000;
if(z>1000) z-=2000;
else if(z<-1000) z =2000;
}
}

camera.position.x = ( mouseX - camera.position.x ) * 0.05;
camera.position.y = ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt(scene.position); renderer.render( scene, camera ); 
}