Html5 canvas for 3d snowflake dancing

Comments: The canvas label and three. js of HTML5 are used to achieve the 3D snowflake flying effect. You can drag the mouse to rotate it. You need to browse it in a browser that supports the CSS3 attribute.

The Code is as follows:
Var SCREEN_WIDTH = window. innerWidth;
Var SCREEN_HEIGHT = window. innerHeight; </p> <p> var container; </p> <p> var particle; </p> <p> var camera;
Var scene;
Var renderer; </p> <p> var mouseX = 0;
Var mouseY = 0; </p> <p> var then whalfx = window. innerWidth/2;
Var empty whalfy = window. innerHeight/2;

Var participant = [];
Var participant Image = new Image (); // THREE. ImageUtils. loadTexture ("img/Participant lesmoke.png ");
Particle Image. src = 'images/particle moke.png '; </p> <p>

Function init () {</p> <p> container = document. createElement ('div ');
Document. body. appendChild (container); </p> <p> camera = new THREE. PerspectiveCamera (75, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 10000 );
Camera. position. z= 1000; </p> <p> scene = new THREE. Scene ();
Scene. add (camera );

Renderer = new THREE. CanvasRenderer ();
Renderer. setSize (SCREEN_WIDTH, SCREEN_HEIGHT );
Var material = new THREE. Participant basicmaterial ({map: new THREE. Texture (participant image )});

For (var I = 0; I <500; I ++) {</p> <p> particle = new participant 3D (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 );

Particle. push (particle );
} </P> <p> container. appendChild (renderer. domElement); </p> <p>
Document. addEventListener ('mousemove ', onDocumentMouseMove, false );
Document. addEventListener ('touchstart', onDocumentTouchStart, false );
Document. addEventListener ('touchmove ', onDocumentTouchMove, false );

SetInterval (loop, 1000/60 );

}

Function onDocumentMouseMove (event) {</p> <p> mouseX = event. clientX-response whalfx;
MouseY = event. clientY-Restart whalfy;
} </P> <p> function onDocumentTouchStart (event) {</p> <p> if (event. touches. length = 1) {</p> <p> event. preventDefault (); </p> <p> mouseX = event. touches [0]. pageX-windowHalfX;
MouseY = event. touches [0]. pageY-callback whalfy;
}
} </P> <p> function onDocumentTouchMove (event) {</p> <p> if (event. touches. length = 1) {</p> <p> event. preventDefault (); </p> <p> mouseX = event. touches [0]. pageX-windowHalfX;
MouseY = event. touches [0]. pageY-callback whalfy;
}
} </P> <p> // </p> <p> function loop () {</p> <p> for (var I = 0; I <participant. length; I ++)
{</P> <p> var particle = participant [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); </p> <p> renderer. render (scene, camera); </p> <p>
}