/home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/animation/cameraPathAnimation.js

xeogl / API Docs

API Docs for:

File: /home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/animation/cameraPathAnimation.js

  1. /**
  2.  A **CameraPathAnimation** animates the {{#crossLink "Scene"}}{{/crossLink}}'s {{#crossLink "Camera"}}{{/crossLink}} along a {{#crossLink "CameraPath"}}{{/crossLink}}.
  3.  
  4.  ## Examples
  5.  
  6.  * [Interpolating the Camera along a path](../../examples/#camera_path_interpolation)
  7.  * [Flying directly to each frame on a path](../../examples/#camera_path_flyToFrame)
  8.  * [Jumping directly to each frame on a path](../../examples/#camera_path_scrubToFrame)
  9.  * [A menu of Camera waypoints to fly to](../../examples/#camera_path_frameMenu)
  10.  
  11.  ## Usage
  12.  
  13.  ### Interpolating the Camera along a path
  14.  
  15.  In this example we'll use the CameraPathAnimation's
  16.  {{#crossLink "CameraPathAnimation/play"}}{{/crossLink}} method to smoothly <b>interpolate</b>
  17.  the {{#crossLink "Scene"}}Scene{{/crossLink}}'s {{#crossLink "Camera"}}{{/crossLink}} along a {{#crossLink "CameraPath"}}{{/crossLink}}:
  18.  
  19.  <a href="../../examples/#camera_path_interpolation"><img src="http://i.giphy.com/l0MYDGMYzdFf6TqRW.gif"></img></a>
  20.  
  21.  ````Javascript
  22.  // Load a model from glTF
  23.  
  24.  var gearbox = new xeogl.GLTFModel({
  25.          src: "models/gltf/GearboxAssy/glTF-MaterialsCommon/GearboxAssy.gltf"
  26.  });
  27.  
  28.  // Define a CameraPath
  29.  
  30.  var cameraPath = new xeogl.CameraPath({
  31.      frames: [
  32.          {t: 0, eye: [184.21, 10.54, -7.03], look: [159.2, 17.02, 3.21], up: [-0.15, 0.97, 0.13]},
  33.          {t: 1, eye: [184.91, 10.10, -11.26], look: [171.03, 13.69, -5.57], up: [-0.15, 0.97, 0.12]},
  34.          {t: 2, eye: [181.37, 12.35, -16.93], look: [171.03, 13.69, -5.57], up: [-0.17, 0.93, 0.28]},
  35.          {t: 2, eye: [174.01, 13.55, -20.70], look: [171.03, 13.69, -5.57], up: [-0.01, 0.90, 0.40]},
  36.          {t: 4, eye: [166.48, 14.36, -20.30], look: [171.03, 13.69, -5.57], up: [0.19, 0.88, 0.40]},
  37.          {t: 5, eye: [160.32, 14.69, -16.63], look: [171.03, 13.69, -5.57], up: [0.36, 0.87, 0.29]},
  38.          {t: 6, eye: [156.67, 17.97, -4.77], look: [162.53, 17.42, 1.28], up: [0.36, 0.87, 0.29]},
  39.          {t: 7, eye: [151.14, 16.68, -10.04], look: [158.94, 15.95, -1.99], up: [0.36, 0.87, 0.29]},
  40.          {t: 8, eye: [146.26, 17.56, -4.77], look: [152.13, 17.05, 1.28], up: [0.36, 0.87, 0.28]},
  41.          {t: 9, eye: [137.26, 18.36, -9.65], look: [149.76, 17.27, 3.24], up: [0.36, 0.87, 0.28]},
  42.          {t: 10, eye: [139.04, 18.29, -11.17], look: [149.76, 17.27, 3.24], up: [0.32, 0.87, 0.33]},
  43.          {t: 11, eye: [140.66, 18.13, -12.26], look: [149.76, 17.27, 3.24], up: [0.28, 0.87, 0.35]},
  44.          {t: 12, eye: [147.18, 17.66, -14.56], look: [149.76, 17.27, 3.24], up: [0.12, 0.89, 0.41]},
  45.          {t: 13, eye: [158.05, 16.33, -12.69], look: [149.76, 17.27, 3.24], up: [-0.11, 0.91, 0.34]},
  46.          {t: 14, eye: [150.11, 13.26, -6.69], look: [147.95, 13.50, -2.52], up: [-0.11, 0.91, 0.34]},
  47.          {t: 15, eye: [149.27, 13.00, -3.34], look: [148.72, 13.05, -2.29], up: [-0.11, 0.91, 0.35]},
  48.          {t: 16, eye: [152.62, 11.65, -4.87], look: [148.47, 12.08, 3.08], up: [-0.11, 0.91, 0.35]},
  49.          {t: 17, eye: [153.35, 12.24, -1.84], look: [148.69, 12.72, 7.01], up: [-0.11, 0.91, 0.35]},
  50.          {t: 18, eye: [156.49, 12.11, 0.74], look: [148.69, 12.72, 7.012], up: [-0.23, 0.92, 0.26]},
  51.          {t: 19, eye: [158.52, 11.98, 5.21], look: [148.69, 12.72, 7.01], up: [-0.32, 0.92, 0.12]},
  52.          {t: 20, eye: [158.60, 11.50, 7.91], look: [148.69, 12.72, 7.01], up: [-0.30, 0.94, 0.035]},
  53.          {t: 21, eye: [157.60, 11.76, 11.51], look: [148.69, 12.72, 7.01], up: [-0.31, 0.93, -0.089]},
  54.          {t: 22, eye: [152.67, 18.35, 14.29], look: [148.69, 12.72, 7.01], up: [-0.46, 0.51, -0.70]},
  55.          {t: 23, eye: [148.79, 21.67, 11.52], look: [148.69, 12.72, 7.01], up: [-0.15, 0.036, -0.97]},
  56.          {t: 24, eye: [147.11, 22.40, 9.07], look: [148.69, 12.72, 7.01], up: [0.38, -0.16, -0.89]},
  57.          {t: 25, eye: [144.80, 21.92, 6.23], look: [148.69, 12.72, 7.01], up: [0.98, -0.02, 0.03]},
  58.          {t: 26, eye: [144.11, 20.18, 2.13], look: [148.69, 12.72, 7.01], up: [0.71, 0.29, 0.62]},
  59.          {t: 27, eye: [145.87, 17.37, -1.40], look: [148.69, 12.72, 7.01], up: [0.31, 0.60, 0.71]},
  60.          {t: 28, eye: [144.37, 19.17, -7.33], look: [146.13, 16.27, -2.08], up: [0.31, 0.60, 0.71]},
  61.          {t: 29, eye: [142.54, 21.91, -17.26], look: [146.89, 14.81, -4.28], up: [0.31, 0.60, 0.71]}
  62.      ]
  63.  });
  64.  
  65.  // Once the model has loaded, animate the
  66.  // (default Scene's default Camera) along the CameraPath
  67.  
  68.  var cameraPathAnimation = new xeogl.CameraPathAnimation({
  69.      cameraPath: cameraPath
  70.  });
  71.  
  72.  gearbox.on("loaded", function () {
  73.      cameraPathAnimation.play();
  74.  });
  75.  ````
  76.  
  77.  <br>
  78.  ### Flying directly to each frame on a path
  79.  
  80.  In this example, we'll use the CameraPathAnimation's {{#crossLink "CameraPathAnimation/flyToFrame"}}{{/crossLink}} method
  81.  to <b>fly</b> the {{#crossLink "Camera"}}{{/crossLink}} directly to each frame on the {{#crossLink "CameraPath"}}{{/crossLink}}:
  82.  
  83.  <a href="../../examples/#camera_path_flyToFrame"><img src="http://i.giphy.com/l3vQYNjsnAQwPBeYU.gif"></img></a>
  84.  
  85.  ````javascript
  86.  var i = 0;
  87.  var dir = 1;
  88.  
  89.  gearbox.on("loaded", function () {
  90.      function nextFrame() {
  91.          cameraPathAnimation.flyToFrame(i += dir, function() { setTimeout(nextFrame, 1000); });
  92.  
  93.          if (i <= 0 || i >= 29) {
  94.              dir = -dir;
  95.          }
  96.      }
  97.      nextFrame();
  98.  });
  99.  ````
  100.  <br>
  101.  ### Jumping directly to each frame on a path
  102.  
  103.  In this example, we'll use the CameraPathAnimation's {{#crossLink "CameraPathAnimation/scrubToFrame"}}{{/crossLink}} method
  104.  to <b>jump</b> the {{#crossLink "Camera"}}{{/crossLink}} directly to each frame on the {{#crossLink "CameraPath"}}{{/crossLink}}:
  105.  
  106.  <a href="../../examples/#camera_path_scrubToFrame"><img src="http://i.giphy.com/l0Hlyqk7kewTjSBZ6.gif"></img></a>
  107.  
  108.  ````javascript
  109.  var i = 0;
  110.  var dir = 1;
  111.  
  112.  gearbox.on("loaded", function () {
  113.      function nextFrame() {
  114.          cameraPathAnimation.scrubToFrame(i += dir);
  115.  
  116.          if (i <= 0 || i >= 29) {
  117.              dir = -dir;
  118.          }
  119.          setTimeout(nextFrame, 1000);
  120.      }
  121.      nextFrame();
  122.  });
  123.  ````
  124.  
  125.  @class CameraPathAnimation
  126.  @module xeogl
  127.  @submodule animation
  128.  @constructor
  129.  @param [scene] {Scene} Parent {{#crossLink "Scene"}}Scene{{/crossLink}}.
  130.  @param [cfg] {*} Configuration
  131.  @param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink "Scene"}}Scene{{/crossLink}}, generated automatically when omitted.
  132.  @param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to CameraPathAnimation.
  133.  @param [cfg.cameraPath] {Number|String|CameraPath} ID or instance of a {{#crossLink "CameraPath"}}{{/crossLink}} to animate the {{#crossLink "Camera"}}{{/crossLink}} along.
  134.  Must be within the same {{#crossLink "Scene"}}{{/crossLink}} as CameraPathAnimation. .
  135.  @extends Component
  136.  */
  137. xeogl.CameraPathAnimation = class xeoglCameraPathAnimation extends xeogl.Component {
  138.  
  139.     init(cfg) {
  140.  
  141.         super.init(cfg);
  142.  
  143.         this._cameraFlightAnimation = this.create({
  144.             type: "xeogl.CameraFlightAnimation"
  145.         });
  146.  
  147.         this._t = 0;
  148.  
  149.         this.state = xeogl.CameraPathAnimation.SCRUBBING;
  150.  
  151.         this._playingFromT = 0;
  152.         this._playingToT = 0;
  153.         this._playingRate = cfg.playingRate || 1.0;
  154.         this._playingDir = 1.0;
  155.  
  156.         this.cameraPath = cfg.cameraPath;
  157.  
  158.         this._tick = this.scene.on("tick", this._updateT, this);
  159.     }
  160.  
  161.     _updateT() {
  162.  
  163.         const cameraPath = this._attached.cameraPath;
  164.  
  165.         if (!cameraPath) {
  166.             return;
  167.         }
  168.  
  169.         const f = 0.002;
  170.         //var f = 1.0;
  171.  
  172.         switch (this.state) {
  173.  
  174.             case xeogl.CameraPathAnimation.SCRUBBING:
  175.                 return;
  176.  
  177.             case xeogl.CameraPathAnimation.PLAYING:
  178.  
  179.                 this._t += this._playingRate * f;
  180.  
  181.                 const numFrames = this.cameraPath.frames.length;
  182.                 if (numFrames === 0 || (this._playingDir < 0 && this._t <= 0) || (this._playingDir > 0 && this._t >= this.cameraPath.frames[numFrames - 1].t)) {
  183.                     this.state = xeogl.CameraPathAnimation.SCRUBBING;
  184.                     this._t = this.cameraPath.frames[numFrames - 1].t;
  185.                     return;
  186.                 }
  187.  
  188.                 cameraPath.loadFrame(this._t);
  189.  
  190.                 break;
  191.  
  192.             case xeogl.CameraPathAnimation.PLAYING_TO:
  193.  
  194.                 let t = this._t + (this._playingRate * f * this._playingDir);
  195.  
  196.                 //t = this._ease(t, this._playingFromT, this._playingToT, this._playingToT - this._playingFromT);
  197.  
  198.                 if ((this._playingDir < 0 && t <= this._playingToT) || (this._playingDir > 0 && t >= this._playingToT)) {
  199.                     t = this._playingToT;
  200.                     this.state = xeogl.CameraPathAnimation.SCRUBBING;
  201.                 }
  202.  
  203.                 this._t = t;
  204.  
  205.                 cameraPath.loadFrame(this._t);
  206.  
  207.                 break;
  208.         }
  209.     }
  210.  
  211.     // Quadratic easing out - decelerating to zero velocity
  212.     // http://gizma.com/easing
  213.  
  214.     _ease(t, b, c, d) {
  215.         t /= d;
  216.         return -c * t * (t - 2) + b;
  217.     }
  218.  
  219.     /**
  220.      The {{#crossLink "CameraPath"}}{{/crossLink}} for this CameraPathAnimation.
  221.  
  222.      Fires a {{#crossLink "CameraPathAnimation/cameraPath:event"}}{{/crossLink}} event on change.
  223.  
  224.      @property cameraPath
  225.      @type CameraPath
  226.      */
  227.     set cameraPath(value) {
  228.         this._attach({name: "cameraPath", type: "xeogl.CameraPath", component: value, sceneDefault: false});
  229.     }
  230.  
  231.     get cameraPath() {
  232.         return this._attached.cameraPath;
  233.     }
  234.  
  235.     /**
  236.      The rate at which this CameraPathAnimation plays.
  237.  
  238.      @property rate
  239.      @type Number
  240.      */
  241.     set rate(value) {
  242.         this._playingRate = value;
  243.     }
  244.  
  245.     get rate() {
  246.         return this._playingRate;
  247.     }
  248.  
  249.     /**
  250.      * Begins playing this CameraPathAnimation from the current time.
  251.      * @method play
  252.      */
  253.     play() {
  254.         if (!this._attached.cameraPath) {
  255.             return;
  256.         }
  257.         this.state = xeogl.CameraPathAnimation.PLAYING;
  258.     }
  259.  
  260.     /**
  261.      * Begins playing this CameraPathAnimation from the current time to the given time.
  262.      *
  263.      * @method playToT
  264.      * @param {Number} t Time instant.
  265.      */
  266.     playToT(t) {
  267.         const cameraPath = this._attached.cameraPath;
  268.         if (!cameraPath) {
  269.             return;
  270.         }
  271.         this._playingFromT = this._t;
  272.         this._playingToT = t;
  273.         this._playingDir = (this._playingToT - this._playingFromT) < 0 ? -1 : 1;
  274.         this.state = xeogl.CameraPathAnimation.PLAYING_TO;
  275.     }
  276.  
  277.     /**
  278.      * Begins playing this CameraPathAnimation from the current time to the time at the given frame.
  279.      *
  280.      * @method playToFrame
  281.      * @param {Number} frameIdx Index of the frame to play to.
  282.      */
  283.     playToFrame(frameIdx) {
  284.         const cameraPath = this._attached.cameraPath;
  285.         if (!cameraPath) {
  286.             return;
  287.         }
  288.         const frame = cameraPath.frames[frameIdx];
  289.         if (!frame) {
  290.             this.error("playToFrame - frame index out of range: " + frameIdx);
  291.             return;
  292.         }
  293.         const t = (1.0 / cameraPath.frames.length ) * frameIdx;
  294.         this.playToT(t);
  295.     }
  296.  
  297.     /**
  298.      * Flies this CameraPathAnimation's {{#crossLink "Camera"}}{{/crossLink}} to the time at the given frame.
  299.      *
  300.      * @method flyToFrame
  301.      * @param {Number} frameIdx Index of the frame to play to.
  302.      * @param {Function} [ok] Callback to fire when playing is complete.
  303.      */
  304.     flyToFrame(frameIdx, ok) {
  305.         const cameraPath = this._attached.cameraPath;
  306.         if (!cameraPath) {
  307.             return;
  308.         }
  309.         const frame = cameraPath.frames[frameIdx];
  310.         if (!frame) {
  311.             this.error("flyToFrame - frame index out of range: " + frameIdx);
  312.             return;
  313.         }
  314.         this.state = xeogl.CameraPathAnimation.SCRUBBING;
  315.         this._cameraFlightAnimation.flyTo(frame, ok);
  316.     }
  317.  
  318.     /**
  319.      * Scrubs (sets) this CameraPathAnimation to the the given time.
  320.      *
  321.      * @method scrubToT
  322.      * @param {Number} t Time instant.
  323.      */
  324.     scrubToT(t) {
  325.         const cameraPath = this._attached.cameraPath;
  326.         if (!cameraPath) {
  327.             return;
  328.         }
  329.         const camera = this.scene.camera;
  330.         if (!camera) {
  331.             return;
  332.         }
  333.         this._t = t;
  334.         cameraPath.loadFrame(this._t, camera);
  335.         this.state = xeogl.CameraPathAnimation.SCRUBBING;
  336.     }
  337.  
  338.     /**
  339.      * Scrubs this CameraPathAnimation to the given frame.
  340.      *
  341.      * @method scrubToFrame
  342.      * @param {Number} frameIdx Index of the frame to scrub to.
  343.      */
  344.     scrubToFrame(frameIdx) {
  345.         const cameraPath = this._attached.cameraPath;
  346.         if (!cameraPath) {
  347.             return;
  348.         }
  349.         const camera = this.scene.camera;
  350.         if (!camera) {
  351.             return;
  352.         }
  353.         const frame = cameraPath.frames[frameIdx];
  354.         if (!frame) {
  355.             this.error("playToFrame - frame index out of range: " + frameIdx);
  356.             return;
  357.         }
  358.         this._t = (1.0 / cameraPath.frames.length ) * frameIdx;
  359.         cameraPath.loadFrame(this._t, camera);
  360.         this.state = xeogl.CameraPathAnimation.SCRUBBING;
  361.     }
  362.  
  363.     /**
  364.      * Stops playing this CameraPathAnimation.
  365.      *
  366.      * @method stop
  367.      */
  368.     stop() {
  369.         this.state = xeogl.CameraPathAnimation.SCRUBBING;
  370.     }
  371.  
  372.     destroy() {
  373.         super.destroy();
  374.         this.scene.off(this._tick);
  375.     }
  376. };
  377.  
  378. xeogl.CameraPathAnimation.STOPPED = 0;
  379. xeogl.CameraPathAnimation.SCRUBBING = 1;
  380. xeogl.CameraPathAnimation.PLAYING = 2;
  381. xeogl.CameraPathAnimation.PLAYING_TO = 3;
  382.