HTML5의 캔버스는 3D 눈송이 댄스 효과를 달성합니다

의견 : 3D Snowflakes 댄스 효과는 HTML5의 캔버스 태그와 3.js를 사용하여 달성됩니다. 마우스를 드래그하여 회전 할 수 있습니다. CSS3 속성을 지원하는 브라우저 아래에서 찾아야합니다.

var screen_width = window.innerWidth;

var screen_height = wind

var 장면;

var 렌더러; </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 (); // 3.ImageUtils.loadTexture ( "img/particlesmoke.png");

입자 .src = 'images/particlesmoke.png'; </p> <p>

함수 init () {</p> <p> 컨테이너 = document.createElement ( 'div');

document.body.appendChild (컨테이너); < / p> <p> 카메라 = 새로운 Three.PerspectiveCamera (75, Screen_Width / Screen_Height, 1, 10000);

camera.position.z = 1000; </p> <p> scene = new Three.scene ();

scene.add (카메라);

renderer = new Three.canvasrenderer ();

renderer.setsize (screen_width, screen_height);

var material = new Three.ParticleBasicMaterial ({MAP : New Three.Texture (ParticleImage)});

for (var i = 0; i <500; i ++) {</p> <p> 입자 = new Particle3d (물질);

Particle.position.x = Math.random () * 2000-1000;

Particle.Position.y = Math.Random () * 2000-1000;

입자.

입자 .Scale.x = Particle.scale.y = 1;

scene.add (입자);

parts.push (입자);

} </p> <p> 컨테이너. AppendChild (renderer.domelement); </p> <p>

document.addeventListener ( 'MouseMove', OnDocumentMouseMove, False);

document.addeventListener ( 'touchStart', ondocumentTouchStart, false);

document.addeventListener ( 'touchmove', ondocumentTouchmove, false);

setInterval (루프, 1000 / 60);

}

function ondocumentmouseMove (event) {</p> <p> mousex = event.clientx -Windowhalfx;

Mousey = event.clienty- Windowhalfy;

} </p> <p> 함수 ondocumentTouchStart (event) {</p> <p> if (event.Touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.Touches [0].

Mousey = event.touches [0] .Pagey- Windowhalfy;

}

} </p> <p> 함수 ondocumentTouchmove (event) {</p> <p> if (event.touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.Touches [0].

Mousey = event.touches [0] .Pagey- Windowhalfy;

}

} </p> <p> // </p> <p> function loop () {</p> <p> for (var i = 0; i <particles.length; i ++)

{</p> <p> var 입자 = 입자 [i];

입자 .updatephysics ();

with (particle.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;

}

}

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>

}