html5的canvas實現3d雪花飄舞效果_html5教學技巧

複製程式碼

程式碼如下：

var SCREEN_WIDTH = windowin; > 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 keywords = [];
var不對粒子圖片(F Image); /THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
不對粒子圖像.src = 'images/ParticleSmoke.png';

函數 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材質= new THREE.ParticleBasicMaterial( { map: new THREE.Texture(articleImage) } );

for (var i = 0; i

粒子= new Particle3D( 材質);
粒子.position.x = Math.random() * 2000 - 1000;
粒子.position.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 );
Listums. ;

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(article.position)
{
if(y if(x>1000) x-=2000;
否則if(x if(z>1000) z-=2000;
else if(z> }
}

相機.position.x = ( mouseX - 相機.position.x ) * 0.05;
相機.position.y = ( - mouseY - 相機.position.y ) * 0.05;
相機.lookAt(場景.位置);

renderer.render( 場景, 相機 );

}