Komentar: Efek tari Snowflakes 3D dicapai dengan menggunakan tag kanvas HTML5 dan tiga.js. Anda dapat menyeret mouse untuk berputar, Anda perlu menjelajah di bawah browser yang mendukung properti CSS3
var screen_width = window.innerwidth;
var screen_height = window.innerheight; </p> <p> wadah var; </p> <p> var parsial; </p> <p> kamera var;
adegan var;
var renderer; </p> <p> var mousex = 0;
var mousey = 0; </p> <p> var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var bagian = [];
var partikel = gambar baru (); // tiga.imageutils.loadtexture ("img/partikelmoke.png");
ParticleImage.src = 'Images/Particlesmoke.png'; </p> <p>
fungsi init () {</p> <p> container = document.createElement ('div');
Document.Body.AppendChild (wadah); </p> <p> Kamera = baru tiga.PerSpectiveCamera (75, screen_width / screen_height, 1, 10000);
camera.position.z = 1000; </p> <p> adegan = baru tiga.scene ();
scene.add (kamera);
renderer = baru tiga.canvasrenderer ();
renderer.setsize (screen_width, screen_height);
var material = new three.particleBasicMaerial ({peta: new tiga.texture (partikel)});
untuk (var i = 0; i <500; i ++) {</p> <p> partikel = partikel baru (material);
particle.position.x = math.random () * 2000 - 1000;
particle.position.y = math.random () * 2000 - 1000;
particle.position.z = math.random () * 2000 - 1000;
Particle.scale.x = Particle.scale.y = 1;
scene.add (partikel);
parts.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 (loop, 1000 /60);
}
fungsi ontDocumentMouseMove (event) {</p> <p> mousex = event.clientx - windowHalfx;
mousey = event.clienty - windowhalfy;
} </p> <p> Fungsi ontdocumentTouchStart (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> Fungsi ontdocumentTouchMove (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> Fungsi loop () {</p> <p> untuk (var i = 0; i <particles.length; i ++)
{</p> <p> var partikel = partikel [i];
particle.updatephysics ();
dengan (partikel. Posisi)
{
if (y <-1000) y+= 2000;
if (x> 1000) x- = 2000;
lain jika (x <-1000) x+= 2000;
if (z> 1000) z- = 2000;
lain jika (z <-1000) z+= 2000;
}
}
camera.position.x += (mousex - camera.position.x) * 0.05;
camera.position.y += ( - mousey - camera.position.y) * 0.05;
kamera.lookat (scene.position); </p> <p> renderer.render (adegan, kamera); </p> <p>
}