使用HTML5的canvas标签和阅读Three js实现的3D雪花飞舞的效果，你可以用鼠标拖动旋转，你需要浏览支持CSS3属性浏览器下






复制代码代码如下所示：
无功screen_width = window.innerwidth；
无功screen_height = window.innerheight；
VaR的容器；
VaR的粒子；
VaR的相机；
VaR的场景；
VaR的渲染；
VaR mouseX = 0；
无功多的= 0；
无功windowhalfx = window.innerwidth / 2；
无功windowhalfy = window.innerheight / 2；

var粒子{ }；
无功particleimage =新的图像（）； / / three.imageutils.loadtexture（IMG / particlesmoke。png）；
particleimage.src = 'images / particlesmoke PNG；


函数init（）{
集装箱= document.createelement（'div）；
document.body.appendchild（容器）；
相机=新three.perspectivecamera（75，screen_width / screen_height，1, 10000）；
照相机。位置。z＝1000；
场景=新三。场景（）；
Scene.add（相机）；

渲染=新three.canvasrenderer（）；
renderer.setsize（screen_width，screen_height）；
var =新材料three.particlebasicmaterial（{图：新三。纹理（particleimage）}）；

对于（var i = 0；i）
粒子=新particle3d（材料）；
粒子的位置。x = Math.random（）* 2000-1000；
粒子的位置。Y = Math.random（）* 2000-1000；
粒子的位置。Z = Math.random（）* 2000-1000；
粒子。刻度。x =粒子。刻度。y＝1；
Scene.add（颗粒）；

Particles.push（颗粒）；
}
container.appendchild（渲染。domelement）；

Document.addEventListener（'mousemove '，ondocumentmousemove，假）；
Document.addEventListener（'touchstart '，ondocumenttouchstart，假）；
Document.addEventListener（'touchmove '，ondocumenttouchmove，假）；

setInterval（环，1000 / 60）；

}

功能ondocumentmousemove（事件）{
event.clientx - windowhalfx mouseX =；
老鼠= event.clienty - windowhalfy；
}
功能ondocumenttouchstart（事件）{
如果（event.touches.length = = 1）{
Event.preventDefault（）；
mouseX =事件。触动{ 0 }。pagex - windowhalfx；
老鼠=事件。触动{ 0 }。pagey - windowhalfy；
}
}
功能ondocumenttouchmove（事件）{
如果（event.touches.length = = 1）{
Event.preventDefault（）；
mouseX =事件。触动{ 0 }。pagex - windowhalfx；
老鼠=事件。触动{ 0 }。pagey - windowhalfy；
}
}

函数循环（）{
对于（var i = 0；i < particles.length；i++）
{
var粒子=粒子{ }；
particle.updatephysics（）；

用（粒子，位置）
{
如果（y＜1000）y + = 2000；
如果（x = 1000）x＝2000；
否则如果（x＜1000）x＝2000；
如果（z > 1000）z＝2000；
否则如果（z＜1000）z＝2000；
}
}

摄像机的位置。x =（mouseX相机。位置。×）×0.05；
摄像机的位置。Y =（像老鼠的相机。位置。y）* 0.05；
Camera.lookAt（现场位置）；
Renderer.render（场景，相机）；

}