examples/example37.html

<!DOCTYPE html>
<html>
 <head> 
  <title>Example 37 - Animation tween</title> 
  <style>
    body{
      margin: 0;
      overflow: hidden;
    }

    #stats {  /* Align stats top-left */
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style> 
  </head>
  <body>
  <!-- JavaScript libraries -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
  <script src="assets/libs/TrackballControls.js"></script>
  <script src="assets/libs/PLYLoader.js"></script>
  <script src="assets/libs/tween.min.js"></script>
  <!-- Javascript code that runs our Three.js examples --> 
  <script>

    // once everything is loaded, we run our Three.js stuff.
    $(function () {
      var stats = initStats();

      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();

      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

      // create a render and set the size
      var webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);

      // position and point the camera to the center of the scene
      camera.position.set(10,10,10);
      camera.lookAt(new THREE.Vector3(0, -2, 0));

      // add spotlight for the shadows
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(20,20,20);
      scene.add(spotLight);

      // add the output of the renderer to the html element
      $('body').append(webGLRenderer.domElement);

      // call the render function
      var step = 0;

      // setup the control gui
      var controls = new function () {};

      var particleSystem = new THREE.Object3D();
      var loadedGeometry;

      var onUpdate = function () {
        var count = 0;
        var pos = this.pos;

        loadedGeometry.vertices.forEach(function (e) {
          var newY = ((e.y + 3.22544) * pos) - 3.22544;
          particleSystem.geometry.vertices[count++].set(e.x, newY, e.z);
        });

        particleSystem.sortParticles = true;
      };

      // create a tween
      // http://sole.github.io/tween.js/examples/03_graphs.html
      var posSrc = {pos: 1}
      var tween = new TWEEN.Tween(posSrc)
        .to({pos: 0}, 5000)
        .easing(TWEEN.Easing.Sinusoidal.InOut)
        .onUpdate(onUpdate);

      var tweenBack = new TWEEN.Tween(posSrc)
        .to({pos: 1}, 5000)
        .easing(TWEEN.Easing.Sinusoidal.InOut)
        .onUpdate(onUpdate);

      tween.chain(tweenBack);
      tweenBack.chain(tween);

      var gui = new dat.GUI();

      var loader = new THREE.PLYLoader();

      loader.load("assets/models/test.ply", function (geometry) {
        loadedGeometry = geometry.clone();

        var material = new THREE.ParticleBasicMaterial({
          color: 0xffffff,
          size: 0.4,
          opacity: 0.6,
          transparent: true,
          blending: THREE.AdditiveBlending,
          map: generateSprite()
        });

        particleSystem = new THREE.ParticleSystem(geometry, material);
        particleSystem.sortParticles = true;

        tween.start();
        scene.add(particleSystem);
      });


      render();

      // from THREE.js examples
      function generateSprite() {

        var canvas = document.createElement('canvas');
        canvas.width = 16;
        canvas.height = 16;

        var context = canvas.getContext('2d');
        var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
        gradient.addColorStop(0, 'rgba(255,255,255,1)');
        gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
        gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
        gradient.addColorStop(1, 'rgba(0,0,0,1)');

        context.fillStyle = gradient;
        context.fillRect(0, 0, canvas.width, canvas.height);

        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        return texture;

      }

      function render() {
        stats.update();
        TWEEN.update();
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
      }

      function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        $('body').append(stats.domElement);
        return stats;
      }
    });
  </script>  
 </body>
</html>