examples/example40.html

<!DOCTYPE html>
<html>
 <head> 
  <title>Example 40 - Path controls</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> 
  <!-- NBBBB we're using three.js r58  -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.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/PathControls.js"></script> 
  <!-- Javascript code that runs our Three.js examples --> 
  <script>
    // once everything is loaded, we run our Three.js stuff.
    $(function () {
      var container, stats;
      var camera, controls, scene, renderer;
      var cross;
      var clock = new THREE.Clock();

      initStats();
      init();
      animate();

      function generatePoints (loop_points, n_loops, h_loop, r) {
        var points = [];
        var n_points = n_loops * loop_points;
        var i = 0, j = 0;
        var alpha = (2 * Math.PI) / loop_points;
        var h_step = h_loop / n_points;
        var h = 0;

        for (i = 0; i < n_loops; i += 1) {
          for (j = 0; j < loop_points; j +=1) {
            points.push([
              r * Math.cos(alpha*j),  // x
              h, // y
              r * Math.sin(alpha*j)  // z
            ]);
            h += h_step;
          }
        }

        return points;
      }

      function init() {
        var points = generatePoints(16,8,42,12);

        camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
        controls = new THREE.PathControls( camera );


        controls.waypoints = points;
        controls.duration = 80
        controls.useConstantSpeed = true;
        controls.lookSpeed = 0.2;
        controls.lookVertical = true;
        controls.lookHorizontal = true;
        controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
        controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
        controls.lon = 180;

        controls.init();

        // world

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
        scene.add(controls.animationParent);

      
        // add some objects to understand movements
        var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
        var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

        for ( var i = 0; i < 500; i ++ ) {
          var mesh = new THREE.Mesh( geometry, material );
          mesh.position.x = ( Math.random() - 0.5 ) * 1000;
          mesh.position.y = ( Math.random() - 0.5 ) * 1000;
          mesh.position.z = ( Math.random() - 0.5 ) * 1000;
          mesh.updateMatrix();
          mesh.matrixAutoUpdate = false;
          scene.add( mesh );
        }

        var mesh = new THREE.Mesh(
          new THREE.CubeGeometry(3,42,3),
          new THREE.MeshLambertMaterial({color: 0x12d434})
        );
        mesh.position.y = 21;
        scene.add(mesh);
        
        var plane = new THREE.Mesh(
          new THREE.PlaneGeometry(20,20),
          new THREE.MeshBasicMaterial({color: 0x565656})
        );
        plane.rotation.x = -Math.PI/2;
        scene.add(plane);

        // add some objects to trace path
        var pathGeometry = new THREE.Geometry();

        points.forEach(function (point) {
          var s = new THREE.Mesh(
            new THREE.SphereGeometry(0.1),
            new THREE.MeshLambertMaterial({color: 0xff0000})
          );
          s.position.set(point[0], point[1], point[2]);
          scene.add(s);

          pathGeometry.vertices.push(new THREE.Vector3(point[0],point[1],point[2]));
        });

        var path = new THREE.Line(pathGeometry, new THREE.LineBasicMaterial({color: 0xff0000}));

        scene.add(path);        


        // lights
        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 1, 1, 1 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0x002288 );
        light.position.set( -1, -1, -1 );
        scene.add( light );

        light = new THREE.AmbientLight( 0x222222 );
        scene.add( light );

        // renderer
        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setClearColor( scene.fog.color, 1 );
        renderer.setSize( window.innerWidth, window.innerHeight );

        $('body').append( renderer.domElement );

        // start animation
        controls.animation.play( true, 0 );

      }

      function animate() {
        stats.update();
        
        requestAnimationFrame( animate );
        render();
      }

      function render() {
        var delta = clock.getDelta();
        THREE.AnimationHandler.update( delta );
        controls.update( delta );
        renderer.render( scene, camera );
      }

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