Die Leinwand von HTML5 erzielen 3D -Schneeflocken -Tanzeffekte

Kommentar: Der 3D -Snowflakes -Tanzeffekt wird mit dem Canvas -Tag von HTML5 und drei.js erzielt. Sie können die Maus zum Drehen ziehen. Sie müssen unter einem Browser stöbern, der CSS3 -Eigenschaften unterstützt

var screen_width = fenster.innnerwidth;

var screen_height = window.innerHeight;

var szene;

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

var mausy = 0; < / p> <p> var windowhalfx = window.innnerwidth / 2;

var windowhalfy = fenster.innerHeight / 2;

var parts = [];

var Partleimerage = new Image (); // drei.imageUtils.loadTexture ("IMG/partikelmoke.png");

partikel.src = 'bilder/partikelmoke.png'; </p> <p>

Funktion 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> szene = new Three.scene ();

Szene.Add (Kamera);

Renderer = new Three.Canvasrenderer ();

renderer.setSize (screen_width, screen_height);

var materials = new Three.ParticleBasicmaterial ({map: new Three.Texture (Partikel)});

für (var i = 0; i <500; i ++) {</p> <p> Partikel = neues Partikel3d (Material);

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

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

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

partikel.scale.x = partikel.scale.y = 1;

Szene.Add (Partikel);

Teils.push (Partikel);

} </p> <p> Container.AppendChild (Renderer.Domelement); </p> <p>

document.adDeVentListener ('Mousemove', OndoCumentMousemove, False);

document.adDeVentListener ('TouchStart', OndocumentTouchstart, False);

document.adDeVentListener ('TouchMove', OndocumentTouchMove, False);

setInterval (Schleife 1000 /60);

}

Funktion OnDocumentMousemove (Ereignis) {</p> <p> mousex = event.clientX - windowhalfx;

mousey = event.clienty - windowhalfy;

} </p> <p> Funktion ONDoCumentTouchStart (Ereignis) {</p> <p> if (event.touches.Length == 1) {</p> <p> Ereignis.PreventDefault ();

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

}

} </p> <p> Funktion ONDoCumentTouchMove (Ereignis) {</p> <p> if (event.touches.Length == 1) {</p> <p> Ereignis.PreventDefault ();

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

}

} </p> <p> // </p> <p> Funktionsschleife () {</p> <p> für (var i = 0; i <Partikel.length; i ++)

{</p> <p> var Partikel = Partikel [i];

Partikel.UpdatePhysics ();

mit (Partikel.Position)

{

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

if (x> 1000) x- = 2000;

sonst wenn (x <-1000) x+= 2000;

if (z> 1000) z- = 2000;

sonst wenn (z <-1000) z+= 2000;

}

}

camera.position.x += (mousex - camera.position.x) * 0.05;

camera.position.y += ( - mausy - camera.position.y) * 0.05;

camera.lookat (szene.position); </p> <p> renderer.render (Szene, Kamera); </p> <p>

}