HTML5 キャンバスで 3D スノーフレーク ダンス効果を実現_html5 チュートリアル スキル

复制代記入

代記入例:

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

var コンテナ;

var 粒子;

var カメラ;
var シーン;
var レンダラー;

varmouseX = 0;
varmouseY = 0;

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

var 粒子 = [];
vararticleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
articleImage.src = 'images/ParticleSmoke.png';

function init() {

コンテナ = 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 粒子.position.x = Math.random() * 2000 - 1000;
粒子.position.y = Math.random() * 2000 - 1000;
粒子.position.z = Math.random() * 2000 - 1000;
article.scale.x =article.scale.y = 1;
scene.add(article );

パーティクル。プッシュ(パーティクル);
}

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

マウスX = イベント.クライアントX - ウィンドウハーフX;
マウスY = イベント.クライアントY - ウィンドウハーフY;
}

function onDocumentTouchStart(event) {

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

イベント.preventDefault();

MouseX =event.touches[0].pageX - windowHalfX;
MouseY =event.touches[0].pageY - windowHalfY;
}
}

function onDocumentTouchMove(event) {

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

イベント.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 if(x>1000) x-=2000;
else if(x if(z>1000) z-=2000;
else if(z }
}

カメラ.位置.x = (マウスX - カメラ.位置.x ) * 0.05;
カメラ.位置.y = ( - マウスY - カメラ.位置.y ) * 0.05;
カメラ.lookAt(シーン.位置);

renderer.render( シーン, カメラ );

}