Комментарий: Эффект танца 3D Snowflakes достигается с использованием холста HTML5 и Three.js. Вы можете перетащить мышь для вращения, вам нужно просмотреть под браузером, который поддерживает свойства CSS3
var screen_width = window.innerwidth;
var screen_height = window.innerheight; </p> <p> var container; </p> <p> var partial; </p> <p> var Camera;
var сцена;
var renderer; </p> <p> var mousex = 0;
var mousey = 0; < / p> <p> var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var parts = [];
var particleImage = new Image (); // three.ImageUtils.loadexture ("img/particleMoke.png");
particleImage.src = 'Images/particlsMoke.png'; </p> <p>
function init () {</p> <p> container = document.createElement ('div');
document.body.appendchild (контейнер); < / p> <p> camera = new Three.perspectivecamera (75, Screen_width / Screen_height, 1, 10000);
cameman.position.z = 1000; </p> <p> scene = new Three.Scene ();
Scene.add (камера);
renderer = new Three.canvasrenderer ();
renderer.setsize (screen_width, screen_height);
var material = новый.
for (var i = 0; i <500; i ++) {</p> <p> particle = new particle3d (материал);
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 (частица);
части.push (частица);
} </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);
}
function ondocumentmouseMove (event) {</p> <p> mousex = event.clientx - windowhalfx;
mousey = event.clienty - windowhalfy;
} </p> <p> function oncumentTouchStart (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> function oncumentTouchMove (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> function loop () {</p> <p> for (var i = 0; i <частицы.length; i ++)
{</p> <p> var particle = частицы [i];
particle.updatephysics ();
с (particle.position)
{
if (y <-1000) y+= 2000;
if (x> 1000) x- = 2000;
иначе if (x <-1000) x+= 2000;
if (z> 1000) z- = 2000;
иначе if (z <-1000) z+= 2000;
}
}
Camera.position.x += (mousex - camera.position.x) * 0,05;
Camera.position.y += ( - Mousey - Camera.position.y) * 0,05;
Camera.lookat (Scene.position); </p> <p> renderer.render (сцена, камера); </p> <p>
}