Холст снегопада, изменение скорости частиц

Question

Я пытаюсь изменить скорость частиц этого сценария снегопада, но я не могу найти числа, которые представляют «Падающую скорость». Сейчас частицы падают слишком быстро, вот основная часть скрипта:

var SCREEN_WIDTH = window.innerWidth; 
      var SCREEN_HEIGHT = window.innerHeight; 

      var container; 

      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 imgArr = new Array(); 


      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 10000); 
       camera.position.z = 1000; 

       scene = new THREE.Scene(); 

       renderer = new THREE.CanvasRenderer(); 
       renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 

       for (var i = 0; i < 1000; i++) { 
        var particleImage = new Image(); 
        particleImage.src = imgArr[Math.round(Math.random()*(imgArr.length-1))]; 
        var material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) }); 
        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 = 0.8; 
        scene.add(particle); 

        particles.push(particle); 
       } 

       container.appendChild(renderer.domElement); 

       setInterval(loop, 1000/60); 

      } 

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

       renderer.render(scene, camera); 


      } 

Она использует three.js в качестве основы. Вот оригинальный сценарий, чтобы увидеть его в действии:

http://seb.ly/demos/JSSnow/snow3d.html

Answer 1

Посмотрите на последней строке в init() функции:

setInterval(loop, 1000/60); 

Второй аргумент setInterval() задает интервал в миллисекундах, по истечении которого loop() Функция будет вызываться непрерывно до тех пор, пока вы не остановите ее с помощью clearInterval(). Я думаю, что это то, что вы ищете.

Answer 2

Попробуйте этот код:

1) SnowMan And SnowFall

2) Watch Live Demo

HTML

<canvas id="canvasSnow"></canvas> 

CSS

body{ 
     margin: 0px; 
     padding:0px; 
    } 
#canvasSnow{ 
     /* box-sizing: border-box; 
     border:10px solid red; */ 
     /* color:orange; */ 
     background-color: rgb(2, 2, 83); 

    } 

JS

window.onload=function(){ 
    //////Canvas getting and context getting here 
    var canvas=document.getElementById("canvasSnow"); 
    var ctx=canvas .getContext('2d'); 
    ///seting size of canvas 
    var W=window.innerWidth; 
    var H=window.innerHeight; 
    canvas.width=W; 
    canvas.height=H; 
    function drawGround(){ 
     console.log("draw ground"); 
     ctx.fillStyle="white"; 
     ctx.strokeStyle="green"; 
     ctx.beginPath(); 
     ctx.moveTo(0,H+550); 
     ctx.fillRect(0,H-50,W,50); 
     // ctx.arc(120,H+550,H,0,Math.PI*2,false); 
     // ctx.moveTo(250,H+550); 
     // ctx.arc(350,H+550,H,0,Math.PI*2,false); 
     // ctx.moveTo(W-100,H+550); 
     // ctx.arc(W-70,H+515,H,0,Math.PI*2,false); 
     // ctx.stroke(); 
     ctx.fill(); 
     //console.log(ctx); 
     // ctx.closePath(); 
    } 


    function drawBody(){ 
     ctx.strokeStyle="black"; 
     ctx.fillStyle="white"; 
     ctx.beginPath(); 
     ctx.moveTo(120,H-80);//footer 
     ctx.arc(120,H-80,60,0,Math.PI*2,false); 
     ctx.moveTo(120,H-150) 
     ctx.arc(110,H-150,50,0,Math.PI*2,false); 
     ctx.moveTo(120,H-225) 
     ctx.arc(100,H-225,40,0,Math.PI*2,false); 
     ctx.stroke(); 
     ctx.fill(); 
     ctx.closePath(); 
    } 
    function drawEyes(){ 
     ctx.beginPath(); 
     ctx.fillStyle="black"; 
     ctx.moveTo(120,H-240) 
     ctx.arc(120,H-240,5,0,Math.PI*2,false); 
     ctx.fillStyle="black"; 
     ctx.moveTo(120,H-240) 
     ctx.arc(80,H-235,5,0,Math.PI*2,false); 
     ctx.fill(); 
     ctx.closePath(); 
    } 
function drawNose(){ 

ctx.beginPath(); 
ctx.moveTo(105, H-230); 
ctx.lineTo(130, H-237); 
ctx.lineTo(105,H-220); 
ctx.closePath(); 

// the outline 
ctx.lineWidth = 1; 
ctx.strokeStyle = '#666666'; 
ctx.stroke(); 

// the fill color 
ctx.fillStyle = "#FFCC00"; 
ctx.fill(); 
} 
function drawSmile(){ 
    ctx.beginPath(); 
    ctx.arc(105,H-220,20,Math.PI/6,(Math.PI*(2/3)),false); 
    ctx.strokeStyle="black"; 
    ctx.stroke(); 
} 



    function drawSnowMan(){ 
     drawBody(); 
     drawEyes(); 
     drawNose(); 
     drawSmile(); 
    } 








    ///max Flakes on screen 
    var MAXFLAKES=100; 
    var flakes=[];////array of snow flakes 
    ///initilising arry of snow flakes 
    for(var i=0;i<MAXFLAKES;i++){ 
     flakes.push({ 
      x:Math.random()*W, 
      y:Math.random()*H, 
      ///density of flakes for more heavier fall earlier 
      density:Math.random()*5 +2,///range 2 to 7 
      radius:Math.random()*3+1 
     }); 
    } 
    ///drawing flakes on screen 
    function drawFlakes(){ 
     console.log("drawFlakes"); 
     ctx.clearRect(0,0,W,H); 
     ctx.fillStyle="white"; 
     ctx.beginPath(); 
     for(var i=0;i<MAXFLAKES;i++){ 
      var flake=flakes[i]; 
      ctx.moveTo(flake.x,flake.y);// to to position on screen 
      ctx.arc(flake.x,flake.y,flake.radius,0,Math.PI*2,true);//cw circle drawing 
     } 
     ctx.fill(); 
     moveFlake(); 
     drawSnowMan(); 
     drawGround(); 

    } 


    /////animating flake 
    var angle=0;// this is required to move flake in a windy effect to and fro 
    function moveFlake(){ 
     angle+=0.01; 
     for(var i=0;i<MAXFLAKES;i++){ 
      var flake=flakes[i]; 
      ///snow flake position changing 
      flake.y+=Math.pow(flake.density,2)+1; 
      flake.x+=Math.sin(angle)*2; 
      ///when snow flake reaches bottom of window replacing by new obj; 
      if(flake.y>H){ 
       console.log(flakes[i].y); 
       flakes[i]={ 
        x:Math.random()*W, 
        y:0, 
        density:flake.density, 
        radius:flake.radius 
       } 
       console.log(flakes[i].y); 
      } 

     } 

    } 
    setInterval(drawFlakes,50); 




}