HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

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

2015-12-14 11:23| 发布者: html5cn| 查看: 3859| 评论: 0|来自: jQuery之家

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

  推荐阅读:

  HTML5 canvas炫酷3D雪花飘落特效,nice-Snowing是一款使用HTML5 canvas制作的效果非常炫酷的3D雪花飘落特效插件。该雪花飘落特效使用不同的canvas来制作不同层次的雪花效果,使整个下雪场景具有明显的3D空间层次感,使下雪效果更加真实。


   来源jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 09:51

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部