插件作者在更新中已解决触摸操作失效的问题
圣诞节要来辣！情侣们的节日，单身狗的末日 过节了雪花当然必不可少，我也应景的给blog加上了雪花特效，效果你们已经看到了，但网上的方法存在移动设备触摸操作失效的问题，但最终还是被我粗暴的解决了，现在把简单的教程发出来。
为了方便，我使用了@Min’s提供的插件，跟我一样是typecho的可以到这里下载，其他博客程序的请参考最下方的方法手动配置
插件版安装方法：
首先安装插件，先不要忙着启用，编辑此插件的Plugin.php，搜索以下代码并删除
document.addEventListener("touchstart",onDocumentTouchStart,false);document.addEventListener("touchmove",onDocumentTouchMove,false);以上两句是添加关于触摸移动的事件句柄，在触摸和移动时调用指定的函数
还有以下两个对应函数
function onDocumentTouchStart(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}function onDocumentTouchMove(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}删除后，保存并启用插件，应该就能看到雪花纷飞的效果了，实测Chrome43.0.2357.132，win10，i54590K cpu占用率10%-30%左右，相对于上次用的那个90%已经算是很不错了。
手动安装方法：
- 首先下载snow.zip
解压至任意目录都行，编辑主题的footer.php，在body之间引入three.js，并初始化：
<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 = "https://imjad.cn/usr/themes/dobyi/images/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>- 在body中加入一个div
<div class="snow-container"></div>- 添加css样式
编辑主题的style.css文件，添加如下代码：
.snow-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
} 保存，即可看到效果。