A tela do HTML5 atinge o efeito de dança do floco de neve 3D

Comentário: O efeito de dança dos flocos de neve 3D é alcançado usando a tag de lona do HTML5 e três.js. Você pode arrastar o mouse para girar, você precisa navegar sob um navegador que suporta propriedades CSS3

var screen_width = window.innerwidth;

var screen_height = window.innerHeight; </p> <p> var container; </p> <p> var parcial; </p> <p> var câmera;

cena var;

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

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

var windowHalfy = window.innerHeight / 2;

var peças = [];

var partlEImage = new Image (); // Three.ImageUtils.loadTexture ("img/partlesmoke.png");

partleImage.src = 'imagens/partlesmoke.png'; </p> <p>

function init () {</p> <p> container = document.createElement ('div');

document.body.appendChild (contêiner); </p> <p> câmera = new Three.perspectiveCamera (75, screen_width / screen_height, 1, 10000);

câmera.Position.Z = 1000; </p> <p> cenário = new Three.scene ();

cena.add (câmera);

renderizador = new Three.CanvasRenderer ();

renderer.setsize (screen_width, screen_height);

var material = new Three.ParticleBasicMaterial ({map: new Three.Texture (partícula)});

for (var i = 0; i <500; i ++) {</p> <p> partícula = novo partícula (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;

cenário.Add (partícula);

peças.push (partícula);

} </p> <p> container.appendChild (renderer.domelement); </p> <p>

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

document.addeventListener ('touchstart', OnCumentTouchstart, false);

document.addeventListener ('touchmove', OnDocumentTouchmove, false);

setInterval (loop, 1000 /60);

}

função ondocumentMouSeMove (event) {</p> <p> mousex = event.clientx - windowhalfx;

mousey = event.clienty - windowhalfy;

} </p> <p> função ondocumentTouchStart (event) {</p> <p> if (event.touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.Toouches [0] .Pagex - Wailhalfx;

mousey = event.Touches [0] .Pagey - WindowHalfy;

}

} </p> <p> função ondocumentTouchMove (event) {</p> <p> if (event.touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.Toouches [0] .Pagex - wailhalfx;

mousey = event.Touches [0] .Pagey - WindowHalfy;

}

} </p> <p> // </p> <p> função loop () {</p> <p> para (var i = 0; i <partles.length; i ++)

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

partícula.Updatephysics ();

com (partícula.Position)

{

if (y <-1000) y+= 2000;

if (x> 1000) x- = 2000;

caso contrário, if (x <-1000) x+= 2000;

if (z> 1000) z- = 2000;

caso contrário, se (z <-1000) z+= 2000;

}

}

câmera.position.x += (mousex - câmera.position.x) * 0,05;

câmera.Position.y += ( - mousey - câmera.position.y) * 0,05;

câmera.Lookat (Scene.Position); </p> <p> renderer.render (cena, câmera); </p> <p>

}