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>
}