HTML5 캔버스는 3D 눈송이 춤추는 효과를 얻습니다._html5 튜토리얼 기술

复代码码

代码如下:

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var 컨테이너;

var 입자;

var 카메라;
var 장면;
var 렌더러;

var mouseX = 0;
var mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var 입자 = [];
var 입자 이미지 = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
입자 이미지.src = 'images/ParticleSmoke.png';

함수 init() {

컨테이너 = document.createElement('div');
document.body.appendChild(container);

카메라 = 새로운 THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
카메라.위치.z = 1000;

scene = new THREE.Scene();
scene.add(카메라);

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 ) {

입자 = 새 Particle3D(재료);
입자.위치.x = Math.random() * 2000 - 1000;
입자.위치.y = Math.random() * 2000 - 1000;
입자 .position.z = Math.random() * 2000 - 1000;
입자.scale.x = 입자.scale.y = 1;
scene.add( 입자 );

입자. 푸시(입자);
}

컨테이너.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

setInterval( 루프, 1000 / 60 );

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}

함수 onDocumentTouchStart( 이벤트 ) {

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

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}

함수 onDocumentTouchMove( 이벤트 ) {

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

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}

//

함수 루프() {

for(var i = 0; i {

var 입자 = 입자[i];
입자.updatePhysics();

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

카메라.위치.x = ( 마우스X - 카메라.위치.x ) * 0.05;
카메라.위치.y = ( - 마우스Y - 카메라.위치.y ) * 0.05;
카메라.lookAt(장면.위치);

renderer.render( 장면, 카메라 );

}