Mittwoch, 11. September 2013

Three.js - Particle Engine

Stemkoski made some nice effects with his particle engine. Let's see how we can use it in our own projects.

Setup

Include the ParticleEngine.js
<script src="three/ParticleEngine.js"></script>

If you get an error about scene is not defined, you have to change "var scene = .." into "scene = ..."!

To setup the engine use the following code:
       
 engine = new ParticleEngine();
 engine.setValues( settings );
 engine.initialize();

And add the engine.update() function to your render function.
    var render = function () {
       requestAnimationFrame(render);
       renderer.render(scene, camera);
       engine.update( 0.01 * 0.5 );
    };

Now we will define the settings, which will give us the different effects.

Let it rain

We use this code for some rain. Remember to get an image of a raindrop.
 

//rain
    var settings = {
      positionStyle    : Type.CUBE,
      positionBase     : new THREE.Vector3( 0, 0, 0 ),
      positionSpread   : new THREE.Vector3( 200, 200, 500 ),

      velocityStyle    : Type.CUBE,
      velocityBase     : new THREE.Vector3( 0, 0, -400 ),
      velocitySpread   : new THREE.Vector3( 10, 50, 10 ), 
      accelerationBase : new THREE.Vector3( 0, -10, 0 ),
      
      particleTexture : THREE.ImageUtils.loadTexture( 'images/raindrop2flip.png' ),

      sizeBase    : 4.0,
      sizeSpread  : 2.0,
      colorBase   : new THREE.Vector3(0.66, 1.0, 0.7), // H,S,L
      colorSpread : new THREE.Vector3(0.00, 0.0, 0.2),
      opacityBase : 0.6,

      particlesPerSecond : 3000,
      particleDeathAge   : 1.0,  
      emitterDeathAge    : 60
     };
    
        engine = new ParticleEngine();
 engine.setValues( settings );
 engine.initialize();

And we got some rain.

Customize settings

Let's dig up the settings to understand what is making the rain.

Position
positionStyle    : Type.CUBE,
positionBase     : new THREE.Vector3( 0, 0, 0 ),
positionSpread   : new THREE.Vector3( 20, 20, 20 ),

This defines the area, where the rain should be created. It's obviously a cube of 20x20x20, positioned in the center. See the picture below.


Velocity

velocityStyle    : Type.CUBE,
velocityBase     : new THREE.Vector3( 0, 0, -10 ),
velocitySpread   : new THREE.Vector3( 20, 0, 0 ),
accelerationBase : new THREE.Vector3( 0, 0, 0 ),

This describes the speed and the direction the drops are taking. The base defines the direction AND speed (by the distance). In this example the rain is slowly moving downwards. Notice the change of the axes, Z means -Y (downwards).
The spread defines the amount and direction of spreading. In this example the drops are not going downwards only, but have a little drift to the left and the right (X axis). See picture below.
The acceleration defines a point where all drops are accelerated to. Like wind effects.


Size
sizeBase    : 1.0,
sizeSpread  : 5.0,

The size of the drops and how the difference can be. Drops far away will still appear smaller.

Color
colorBase   : new THREE.Vector3(0.5, 1.0, 0.5), // H,S,L
colorSpread : new THREE.Vector3(0.60, 0.0, 0.3),
opacityBase : 0.6,

The color is in HSL (Hue, Saturation, Lightness). The spread defines again how the color can change randomly. Opacity is the transparency.

In this example we have a light blue (H=0.5), very colorfull (S=1) and pure (L=0.5) color.
The color can spread around, so we have a confetti like rain.

Amount / Time
particlesPerSecond : 1000,
particleDeathAge   : 1.0,
emitterDeathAge    : 5

Selfexplaining. Amount of particles created per second and how long they should exist. EmitterDeath defines the end of the particle animation.


Sample Code

<html>
<html>
 <head>
  <script src="three/build/three.min.js"></script>
  <script src="three/examples/js/controls/OrbitControls.js"></script>
  <script src="three/ParticleEngine.js"></script>
  <script src="jquery-1.10.2.min.js"></script>
    
  <script type="text/javascript">
     
   $(function() {
   
    //scene
    scene = new THREE.Scene();
    //camera
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.set(0,-13,5);
    camera.lookAt(new THREE.Vector3( 0, 5, 0 ));
    
    //renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    //controls
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
    //show canvas
    $("#canvas-container").html(renderer.domElement);
    
    
 //directional light
 var directionalLight = new THREE.DirectionalLight(0xffffff);
 directionalLight.position.set(6, 0, 6);
 scene.add(directionalLight);
 
    //plane
    var geometry = new THREE.PlaneGeometry(20, 20);
    var material = new THREE.MeshLambertMaterial( { color: 0x555555 } );
    var plane = new THREE.Mesh( geometry, material );
    scene.add(plane);
    
    
 //particle
    
    //rain
    var settings = {
      positionStyle    : Type.CUBE,
      positionBase     : new THREE.Vector3( 0, 0, 10 ),
      positionSpread   : new THREE.Vector3( 20, 20, 0 ),

      velocityStyle    : Type.CUBE,
      velocityBase     : new THREE.Vector3( 0, 0, -50 ),
      velocitySpread   : new THREE.Vector3( 5, 5, 0 ), 
      accelerationBase : new THREE.Vector3( 100, 0, 0 ),
      
      particleTexture : THREE.ImageUtils.loadTexture( 'images/raindrop2flip.png' ),

      sizeBase    : 0.4,
      sizeSpread  : 0.1,
      colorBase   : new THREE.Vector3(0.66, 1.0, 0.7), // H,S,L
      colorSpread : new THREE.Vector3(0.00, 0.0, 0.2),
      opacityBase : 0.6,

      particlesPerSecond : 5000,
      particleDeathAge   : 1.0,  
      emitterDeathAge    : 60
     };
    
        engine = new ParticleEngine();
 engine.setValues( settings );
 engine.initialize();
    
    
  
    //render scene
    var render = function () {
     requestAnimationFrame(render);
     renderer.render(scene, camera);
     
     engine.update( 0.01 * 0.5 );
    };
      
    render();
    
    
      
   });
     
  </script>
    
 </head>
 <body style="background: black">
    
  <div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
    
 </body>
</html>

Eingestellt von um

1 Kommentar:

  1. Unknown23. Februar 2016 um 14:19

    hello, I come across an error in the particle engine:TypeError: undefined is not a function (evaluating 'new THREE.Vector3().multiplyVectors( spread, rand3 )')
    do you know how to fix that??Thank you!!!!

    AntwortenLöschen

Abonnieren Kommentare zum Post (Atom)