页面布局-终年盛宴雪花飞舞3D视觉特效 | 蓝文资源库

这是一款京东为配合双12年终盛宴活动在活动页面添加的雪花飞舞3D视觉特效。该雪花特效在页面中构建了一个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()
}); 

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

使用方法

HTML结构

CSS样式

初始化插件

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复