雪花飞舞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;i1000){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()});

雪花飞舞3D视觉特效

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»