博客下雪特效

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之家

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

我来吐槽

*

*

已有 10 条评论

  1. 知道91博客

    不错啊,这个可以啊,必须顶啊

  2. 耐火砖

    外面在下大雪,你的博客也在下雪 @(kuanghan)

    1. 桃先森

      是的是的,哈哈哈 @(xiaoyan)

  3. 胡家小子

    记得去年还弄过 恭喜发财的特效 博客全红 感觉雪花太多了 适当少点更好

  4. 芭比

    这个下雪对电脑配置不高的人  会不会卡呢

  5. cess

    哇,这个棒。666

  6. 撩人的无眠兔

    你好 我这个foot.php文件找不到  这个怎么办呀 是需要自己新建一个吗?