La toile de HTML5 atteint l'effet de danse de flocon de neige 3D

Commentaire: L'effet de danse des flocons de neige 3D est réalisé à l'aide de la balise Canvas de HTML5 et de trois.js. Vous pouvez faire glisser la souris pour tourner, vous devez parcourir un navigateur qui prend en charge les propriétés CSS3

var screen_width = window.innerwidth;

var screen_height = window.innerheight; </p> <p> var conteneur; </p> <p> var partiel; </p> <p> var caméra;

Var Scene;

var rendu; </p> <p> var sourisx = 0;

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

var windowhalfy = window.innerheight / 2;

var parties = [];

var particuleImage = new image (); // trois.imageutils.loadTexture ("img / particlesmoke.png");

ParticleImage.src = 'images / particulesmoke.png'; </p> <p>

fonction init () {</p> <p> conteneur = document.createElement ('div');

Document.Body.ApendChild (conteneur); </p> <p> caméra = new Three.PerspectiveCamera (75, Screen_Width / Screen_Height, 1, 10000);

caméra.position.z = 1000; </p> <p> scene = new Three.Scene ();

scene.add (caméra);

Renderer = new Three.CanvasRenderrer ();

Renderer.SetSize (Screen_Width, Screen_Height);

var Material = new Three.ParticleBasicMaterial ({map: new Three.Texture (particuleImage)});

pour (var i = 0; i <500; i ++) {</p> <p> particule = new particule3d (matériau);

particule.position.x = math.random () * 2000 - 1000;

particule.position.y = math.random () * 2000 - 1000;

particule.position.z = math.random () * 2000 - 1000;

particule.scale.x = particule.scale.y = 1;

scene.add (particule);

Parties.push (particule);

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

Document.AddeventListener («MouseMove», OndocumentMoumove, False);

document.addeventListener ('TouchStart', ONDocumentTouchStart, false);

document.addeventListener ('TouchMove', ONDocumentTouchMove, false);

setInterval (Loop, 1000/60);

}

fonction onDocumentMouSemove (event) {</p> <p> sourisx = event.clientx - windowhalfx;

Mousey = Event.Clienty - WindowHalfy;

} </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 - WindowHalfy;

}

} </p> <p> fonction 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 - WindowHalfy;

}

} </p> <p> // </p> <p> Fonction Loop () {</p> <p> pour (var i = 0; i <particles.length; i ++)

{</p> <p> var particule = particules [i];

particule.updatephysics ();

avec (particule.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;

}

}

caméra.position.x + = (mousex - caméra.position.x) * 0,05;

caméra.position.y + = (- mousey - caméra.position.y) * 0,05;

caméra.lookat (scene.position); </p> <p> renderer.render (scène, appareil photo); </p> <p>

}