ผืนผ้าใบของ HTML5 บรรลุเอฟเฟกต์การเต้นเกล็ดหิมะ 3 มิติ

ความคิดเห็น: เอฟเฟกต์การเต้นของเกล็ดหิมะ 3D ทำได้โดยใช้แท็กผ้าใบของ 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 = ภาพใหม่ (); // three.imageutils.loadTexture ("img/particlesmoke.png");

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

ฟังก์ชั่น init () {</p> <p> container = document.createElement ('div');

document.body.appendchild (คอนเทนเนอร์); </p> <p> กล้อง = ใหม่สาม perspectiveCamera (75, screen_width / screen_height, 1, 10,000);

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

scene.add (กล้อง);

renderer = ใหม่สาม canvasrenderer ();

renderer.setsize (screen_width, screen_height);

VAR วัสดุ = ใหม่ three.particleBasicMaterial ({MAP: ใหม่ Three.Texture (ParticleImage)});

สำหรับ (var i = 0; i <500; i ++) {</p> <p> อนุภาค = new Particle3d (วัสดุ);

particle.position.x = math.random () * 2000 - 1,000;

particle.position.y = math.random () * 2000 - 1,000;

particle.position.z = math.random () * 2000 - 1,000;

particle.scale.x = particle.scale.y = 1;

scene.add (อนุภาค);

Parts.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 (วนซ้ำ, 1,000 / 60);

-

ฟังก์ชั่น onDocumentMousemove (เหตุการณ์) {</p> <p> mousex = event.clientx - windowhalfx;

mousey = event.clienty - windowhalfy;

} </p> <p> ฟังก์ชั่น onDocumentTouchStart (เหตุการณ์) {</p> <p> ถ้า (event.touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.touches [0]

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

-

} </p> <p> ฟังก์ชั่น onDocumentTouchMove (เหตุการณ์) {</p> <p> ถ้า (event.touches.length == 1) {</p> <p> event.preventDefault (); </p> <p> mousex = event.touches [0]

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

-

} </p> <p> // </p> <p> ฟังก์ชั่นลูป () {</p> <p> สำหรับ (var i = 0; i <particles.length; i ++)

{</p> <p> อนุภาค var = อนุภาค [i];

particle.updatephysics ();

ด้วย (particle.position)

-

ถ้า (y <-1000) y+= 2000;

ถ้า (x> 1000) x- = 2000;

อื่นถ้า (x <-1000) x+= 2000;

ถ้า (z> 1000) z- = 2000;

อื่นถ้า (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>

-