التعليق: يتم تحقيق تأثير رقص الثلج ثلاثي الأبعاد باستخدام علامة قماش HTML5 و Three.js. يمكنك سحب الماوس لتدوير ، تحتاج إلى التصفح تحت متصفح يدعم خصائص CSS3
var screen_width = window.innerwidth ؛
var screen_height = window.innerheight ؛ </p> <p> var container ؛ </p> var partial ؛ </p> var camera ؛
مشهد فار
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 issicleImage = new image () ؛ // three.imageutils.loadTexture ("img/isleslesmoke.png") ؛
particleimage.src = 'images/insleslesmoke.png' ؛ </p> <p>
وظيفة init () {</p> <p> container = document.createElement ('div') ؛
document.body.appendChild (حاوية) ؛ < / p> <p> camera = new three.perspectivecamera (75 ، screen_width / screen_height ، 1 ، 10000) ؛
camera.position.z = 1000 ؛ </p> <p> المشهد = جديد three.scene () ؛
المشهد. add (الكاميرا) ؛
العارض = جديد three.canvasrenderer () ؛
Renderer.SetSize (screen_width ، screen_height) ؛
var material = new.particlebasicmaterial ({map: new Three.texture (particleimage)}) ؛
لـ (var i = 0 ؛ i <500 ؛ i ++) {</p> <p> issicle = new particle3d (material) ؛
igonle.position.x = Math.Random () * 2000 - 1000 ؛
igonle.position.y = Math.Random () * 2000 - 1000 ؛
igonle.position.z = Math.Random () * 2000 - 1000 ؛
ignle.scale.x = issicle.scale.y = 1 ؛
المشهد. 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 (حلقة ، 1000 /60) ؛
}
وظيفة onDocumentMouseMove (الحدث) {</p> <p> mousex = event.clientx - windowHalfx ؛
mousey = event.clienty - windowhalfy ؛
} </p> <p> function OnDocumentTouchStart (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 OnDocumentTouchMove (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 <islyles.length ؛ i ++)
{</p> <p> var islicle = islyles [i] ؛
الجسيمات. updatephysics () ؛
مع (الجسيمات)
{
if (y <-1000) y+= 2000 ؛
if (x> 1000) x- = 2000 ؛
آخر إذا (x <-1000) x+= 2000 ؛
if (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>
}