html中实现雪花飞舞,京东双12年终盛宴雪花飞舞3D视觉特效

这是一款京东为配合双12年终盛宴活动在活动页面添加的雪花飞舞3D视觉特效。该雪花特效在页面中构建了一个3D雪花场景，在里面制作出非常有层次感的雪花飞舞效果，并且可以通过鼠标和雪花场景进行互动。

使用方法

HTML结构

该雪花飞舞使用一个空的

作为雪花场景的容器。

CSS样式

需要为雪花场景添加一些必要的CSS样式。

.snow-container{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 100001;

}

初始化插件

在页面页面中引入three.js文件，然后调用randomRange()方法制作随机场景范围，最后在页面DOM元素加载完毕之后通过THREE.js来完成雪花场景的构建，以及添加相应的鼠标互动和移动触摸互动事件。

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()).bind("click",function(){

$(this).fadeOut(1000, function(){

$(this).remove()

})

})

}

}

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="img/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

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);

document.addEventListener("touchstart",onDocumentTouchStart,false);

document.addEventListener("touchmove",onDocumentTouchMove,false);

setInterval(loop,1000/40);

}

function onDocumentMouseMove(event){

mouseX=event.clientX-windowHalfX;

mouseY=event.clientY-windowHalfY;

}

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;

}

}

function loop(){

for(var i=0;i

var particle=particles[i];particle.updatePhysics();

with(particle.position){

if(y

if(x>1000){x-=2000}

else{

if(x

}

if(z>1000){z-=2000}

else{if(z

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()

});