转载

京东双12年终盛宴雪花飞舞3D视觉特效

简要教程

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

京东双12年终盛宴雪花飞舞3D视觉特效

查看演示下载插件

使用方法

HTML结构

该雪花飞舞使用一个空的<div>作为雪花场景的容器。

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

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