12月，圣诞节也快到了，为了应景，给自己博客加上了下雪特效，虽然小白，但倒腾半天还是完成了，之前看了一个博主的教程，本来是可以直接以typecho插件的形式完成的，然鹅...原博主的插件下载不下来了（博客打不开，貌似挂了？），因此把添加教程放上来，顺便自己也做个记录。

1.首先下载这个必要的文件包

点我下载

2.解压压缩包

里面有2个文件，首先将three.js和snow.png放到网站合适的位置（无所谓放哪里，我们只是要能够获取到这2个文件的链接就可以）

3.修改模版文件

这里我们要修改foot.php,首先打开它，在body之间先引入three.js（注意修改JS文件路径）

<script type="text/javascript" src="你three.js文件的位置"></script>

再在后面加入以下内容（下面的代码会用到snow.png，我在后面打备注了，自己记得修改下snow.png的位置）

<script type="text/javascript">
function randomRange(t, i) {
return Math.random() * (i - t) + t
}
Particle3D = function(t) {
THREE.Particle.call(this, t),
this.velocity = new THREE.Vector3(0, -2, 0),
this.velocity.rotateX(randomRange( - 45, 45)),
this.velocity.rotateY(randomRange(0, 360)),
this.gravity = new THREE.Vector3(0, 0, 0),
this.drag = 1
},
Particle3D.prototype = new THREE.Particle,
Particle3D.prototype.constructor = Particle3D,
Particle3D.prototype.updatePhysics = function() {
this.velocity.multiplyScalar(this.drag),
this.velocity.addSelf(this.gravity),
this.position.addSelf(this.velocity)
};
var TO_RADIANS = Math.PI / 180;
THREE.Vector3.prototype.rotateY = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.x;
this.x = o * cosRY + i * sinRY,
this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateX = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.y;
this.y = o * cosRY + i * sinRY,
this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateZ = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.x,
o = this.y;
this.y = o * cosRY + i * sinRY,
this.x = o * -sinRY + i * cosRY
};
$(function() {
var container = document.querySelector(".snow-container");
if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
    return
} else {
    if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
        $(container).css("height", $(window).height())
    }
}
var containerWidth = $(container).width();
var containerHeight = $(container).height();
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var particles = [];
var particleImage = new Image();
particleImage.src = "你snow.png的路径";  //这里改为你自己的snow.png图
片位置
var snowNum=500;
function init(){
camera=new THREE.PerspectiveCamera(75,containerWidth/containerHeight,1,10000);
camera.position.z=1000;
scene=new THREE.Scene();
scene.add(camera);
renderer=new THREE.CanvasRenderer();
renderer.setSize(containerWidth,containerHeight);
var material=new THREE.ParticleBasicMaterial({map:new THREE.Texture(particleImage)});
for(var i=0;i<snowNum;i++){
particle=new Particle3D(material);
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(particle);
particles.push(particle);
}
container.appendChild(renderer.domElement);
document.addEventListener("mousemove",onDocumentMouseMove,false);
setInterval(loop,1000/40);
}
function onDocumentMouseMove(event){
mouseX=event.clientX-windowHalfX;
mouseY=event.clientY-windowHalfY;
}
function loop(){
for(var i=0;i<particles.length;i++){
var particle=particles[i];particle.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.005;
camera.position.y+=(-mouseY-camera.position.y)*0.005;
camera.lookAt(scene.position);
renderer.render(scene,camera)
}
init()
});  
</script>

4.再在body中加入一个div（接在上面的代码后面就可以）

<div class="snow-container"></div>

5.修改模版CSS

编辑主题的style.css文件，添加如下代码：

.snow-container{
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  z-index: 100001;
}  

6.保存刷新即可。

最后声明一下，博主只是将之前博主的代码文件整理了一下，方便其他朋友可以直接使用，代码的版权仍归原作者所有

雪花特效来源于@jQuery之家

原优化修改后的代码来自@猫与向日葵