El lienzo de HTML5 logra el efecto de baile de copo de nieve 3D

Comentario: El efecto de baile de copos de nieve 3D se logra utilizando la etiqueta de lienzo de HTML5 y tres.js. Puede arrastrar el mouse para girar, debe navegar debajo de un navegador que admite las propiedades CSS3

var screen_width = window.innerWidth;

var screen_height = window.innerheight; </p> <p> var contenedor; </p> <p> var parcial; </p> <p> var cámara;

escena var;

var renderer; </p> <p> var mousex = 0;

var rousey = 0; </p> <p> var windowhalfx = window.innerwidth / 2;

var windowhalfy = window.innerheight / 2;

VAR Parts = [];

var part sarticleImage = new Image (); // tres.imageUtils.loadTexture ("img/partículasmoke.png");

partículaImage.src = 'Images/partículaMoke.png'; </p> <p>

función init () {</p> <p> contenedor = document.createElement ('div');

document.body.appendChild (contenedor); </p> <p> cámaras = nueva tres.perspectivecamera (75, screen_width / screen_height, 1, 10000);

Camera.Position.z = 1000; </p> <p> escena = new Three.scene ();

escena.add (cámara);

renderer = new Three.canvasrenderer ();

renderer.setsize (screen_width, screen_height);

VAR MATERIAL = nuevo tres.ParticleBasicMaterial ({MAP: new Thre.Texture (PartencleImage)});

para (var i = 0; i <500; i ++) {</p> <p> partícula = nueva partícula3d (material);

partícula.position.x = Math.random () * 2000 - 1000;

partícula.position.y = math.random () * 2000 - 1000;

partícula.position.z = math.random () * 2000 - 1000;

partícula.scale.x = partícula.scale.y = 1;

escena.add (partícula);

partes.push (partícula);

} </p> <p> Container.appendChild (renderer.domElement); </p> <p>

document.addeventListener ('MouseMove', onDocumentMouseMove, falso);

document.addeventListener ('touchStart', onDocumentTouchStart, falso);

document.addeventListener ('touchmove', onDocumentTouchMove, falso);

setInterval (bucle, 1000 /60);

}

function onDocumentMouseMove (evento) {</p> <p> mousex = event.clientx - windowhalfx;

mousey = event.clienty - windowhalfy;

} </p> <p> Función OnDocumentTouchStart (Event) {</p> <p> if (event.Touches.Length == 1) {</p> <p> Event.PreventDefault (); </p> <p> rousex = event.Touches [0] .pagex - windowhalfx;

mousey = event.Touches [0] .pagey - windowhalfy;

}

} </p> <p> Función OnDocumentTouchMove (evento) {</p> <p> if (event.Touches.Length == 1) {</p> <p> Event.PreventDefault (); </p> <p> MOUSEX = Event.Touches [0] .pagex - Windowshalfx;

mousey = event.Touches [0] .pagey - windowhalfy;

}

} </p> <p> // </p> <p> Function Loop () {</p> <p> for (var i = 0; i <partículas.length; i ++)

{</p> <p> var partícula = partículas [i];

partícula.updatephysics ();

con (partícula. Posición)

{

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;

}

}

cámara.position.x += (mousex - cámaras.position.x) * 0.05;

Camera.Position.y += ( - Mousey - Camera.Position.y) * 0.05;

Camera.lookat (escena.position); </p> <p> renderer.render (escena, cámara); </p> <p>

}