JAVASCRIPT   14

snow.js

Guest on 29th July 2021 03:10:51 PM

  1.  (function($){
  2.    "use strict";  
  3.    var cosRY,sinRY;
  4.     var Particle3D = function (material ) {
  5.  
  6.         THREE.Particle.call( this, material );
  7.        
  8.         //this.material = material instanceof Array ? material : [ material ];
  9.        
  10.         // define properties
  11.         this.velocity = new THREE.Vector3(0,-8,0);
  12.         this.velocity.rotateX(randomRange(-45,45));
  13.         this.velocity.rotateY(randomRange(0,360));
  14.         this.gravity = new THREE.Vector3(0,0,0);
  15.         this.drag = 1;
  16.         // methods...
  17.        
  18.       };
  19.  
  20.       Particle3D.prototype = new THREE.Particle();
  21.       Particle3D.prototype.constructor = Particle3D;
  22.  
  23.       Particle3D.prototype.updatePhysics = function() {
  24.        
  25.         this.velocity.multiplyScalar(this.drag);
  26.         this.velocity.addSelf(this.gravity);
  27.         this.position.addSelf(this.velocity);
  28.  
  29.       }
  30.  
  31.       var TO_RADIANS = Math.PI/180;
  32.  
  33.       THREE.Vector3.prototype.rotateY = function(angle){
  34.                
  35.         cosRY = Math.cos(angle * TO_RADIANS);
  36.         sinRY = Math.sin(angle * TO_RADIANS);
  37.        
  38.         var tempz = this.z;;
  39.         var tempx = this.x;
  40.  
  41.         this.x= (tempx*cosRY)+(tempz*sinRY);
  42.         this.z= (tempx*-sinRY)+(tempz*cosRY);
  43.  
  44.  
  45.       }
  46.  
  47.       THREE.Vector3.prototype.rotateX = function(angle){
  48.                
  49.         cosRY = Math.cos(angle * TO_RADIANS);
  50.         sinRY = Math.sin(angle * TO_RADIANS);
  51.        
  52.         var tempz = this.z;;
  53.         var tempy = this.y;
  54.  
  55.         this.y= (tempy*cosRY)+(tempz*sinRY);
  56.         this.z= (tempy*-sinRY)+(tempz*cosRY);
  57.  
  58.  
  59.       }
  60.  
  61.       THREE.Vector3.prototype.rotateZ = function(angle){
  62.                
  63.         cosRY = Math.cos(angle * TO_RADIANS);
  64.         sinRY = Math.sin(angle * TO_RADIANS);
  65.        
  66.         var tempx = this.x;;
  67.         var tempy = this.y;
  68.  
  69.         this.y= (tempy*cosRY)+(tempx*sinRY);
  70.         this.x= (tempy*-sinRY)+(tempx*cosRY);
  71.  
  72.  
  73.       }
  74.  
  75.  
  76.  
  77.       // returns a random number between the two limits provided
  78.       function randomRange(min, max)
  79.       {
  80.         return ((Math.random()*(max-min)) + min);
  81.       }
  82.  
  83.       $(document).ready(function(){
  84.       if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){} else init();
  85.     });
  86.      
  87.     var SCREEN_WIDTH = window.innerWidth;
  88.           var SCREEN_HEIGHT = window.innerHeight;
  89.           var container;
  90.           var particle;
  91.           var camera;
  92.           var scene;
  93.           var renderer;
  94.           var mouseX = 0;
  95.           var mouseY = 0;
  96.           var windowHalfX = window.innerWidth / 2;
  97.           var windowHalfY = window.innerHeight / 2;
  98.          
  99.           var particles = [];
  100.           var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
  101.           particleImage.src = 'demo-categories/christmas/images/particlesmoke.png';
  102.        
  103.        
  104.           function init() {
  105.             container = document.createElement('div');
  106.             document.getElementById("snow-effect").appendChild(container);
  107.             camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
  108.             camera.position.z = 1000;
  109.             scene = new THREE.Scene();
  110.             scene.add(camera);
  111.              
  112.             renderer = new THREE.CanvasRenderer();
  113.             renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  114.             var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
  115.              
  116.             for (var i = 0; i < 500; i++) {
  117.               particle = new Particle3D( material);
  118.               particle.position.x = Math.random() * 2000 - 1000;
  119.               particle.position.y = Math.random() * 2000 - 1000;
  120.               particle.position.z = Math.random() * 2000 - 1000;
  121.               particle.scale.x = particle.scale.y =  1;
  122.               scene.add( particle );
  123.              
  124.               particles.push(particle);
  125.             }
  126.             container.appendChild( renderer.domElement );
  127.      
  128.             document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  129.             document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  130.             document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  131.            
  132.             setInterval( loop, 1000 / 60 );
  133.            
  134.           }
  135.          
  136.           function onDocumentMouseMove( event ) {
  137.             mouseX = event.clientX - windowHalfX;
  138.             mouseY = event.clientY - windowHalfY;
  139.           }
  140.           function onDocumentTouchStart( event ) {
  141.             if ( event.touches.length == 1 ) {
  142.               event.preventDefault();
  143.               mouseX = event.touches[ 0 ].pageX - windowHalfX;
  144.               mouseY = event.touches[ 0 ].pageY - windowHalfY;
  145.             }
  146.           }
  147.           function onDocumentTouchMove( event ) {
  148.             if ( event.touches.length == 1 ) {
  149.               event.preventDefault();
  150.               mouseX = event.touches[ 0 ].pageX - windowHalfX;
  151.               mouseY = event.touches[ 0 ].pageY - windowHalfY;
  152.             }
  153.           }
  154.           //
  155.           function loop() {
  156.           for(var i = 0; i<particles.length; i++)
  157.             {
  158.               var particle = particles[i];
  159.               particle.updatePhysics();
  160.      
  161.               if(particle.position.y<-1000) particle.position.y+=2000;
  162.                 if(particle.position.x>1000) particle.position.x-=2000;
  163.                 else if(particle.position.x<-1000) particle.position.x+=2000;
  164.                 if(particle.position.z>1000) particle.position.z-=2000;
  165.                 else if(particle.position.z<-1000) particle.position.z+=2000;  
  166.             }
  167.          
  168.             camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  169.             camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
  170.             camera.lookAt(scene.position);
  171.             renderer.render( scene, camera );
  172.            
  173.           }
  174. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.