桃先森 桃先森

博客下雪特效

in 默认分类 文章转载请注明来源!

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

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

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://ttt.lc/2017/12/02/90.html (转载时请注明本文出处及文章链接)

默认分类
发表新评论
已有 10 条评论
  1. 知道91博客
    知道91博客Windows 10谷歌浏览器
    回复

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

  2. 折影轻梦
    折影轻梦Windows 7谷歌浏览器
    回复

    2018新年快乐!!!

  3. 耐火砖
    耐火砖Windows 7火狐浏览器
    回复

    外面在下大雪,你的博客也在下雪

    1. 桃先森
      桃先森本文作者Windows 7UC浏览器
      回复

      @耐火砖 是的是的,哈哈哈

  4. 胡家小子
    胡家小子Windows 10谷歌浏览器
    回复

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

  5. 芭比
    芭比Mac OS X谷歌浏览器
    回复

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

  6. 分板机
    分板机Windows 7谷歌浏览器
    回复

    好长的代码

  7. cess
    cessWindows 7谷歌浏览器
    回复

    哇,这个棒。666

  8. 精斑检测试纸
    精斑检测试纸Windows 7谷歌浏览器
    回复

    以前很爱特效

  9. 撩人的无眠兔
    撩人的无眠兔Windows 7谷歌浏览器
    回复

    你好 我这个<span style="color: rgb(93, 104, 111); font-size: 18px; letter-spacing: 0.15px;">foot.php文件找不到  这个怎么办呀 是需要自己新建一个吗?</span><div><span style="color: rgb(93, 104, 111); font-size: 18px; letter-spacing: 0.15px;">
    </span></div>

博客已顽强运行
©2016- 2019 由 Typecho 强力驱动.Theme by YoDu
吉ICP备16006437号-3
PREVIOUS NEXT
雷姆
拉姆