Tweening camera's FOV

Hi, is there a way to tween camera’s fov using tween.js? let’s say from 45 to 0 and back?

Hi @Lukas_Zahumensky, yes definitely.

Here is some example code:

// start animating from the current camera fov value
var data = {
    fov: cameraEntity.camera.fov
};

this.app
   .tween(data)
   .to({fov: 0}, 1.0, pc.BackOut)
   .yoyo(true)
   .loop(true)
   .on('update', () => {
      cameraEntity.camera.fov = data.fov;
   })
   .start();

Thank you so much @Leonidas :slight_smile: one more question: Is there a way to make tween FOV to 0 then wait for something to be loaded and then tween FOV back to initial value?

You could pause your tween in the loop of your tween, then load something and continue the tween.
Code could look something like this:

this.myTween = this.app
   .tween(data)
   .to({fov: 0}, 1.0, pc.BackOut)
   .yoyo(true)
   .loop(true)
   .on('update', () => {
      cameraEntity.camera.fov = data.fov;
   })
   .on('loop', function(){\
      this.myTween.pause();
      // add your code to load something here
      // as an example i'll use a timeout
      setTimeout(function(){
         this.myTween.resume();
      }.bind(this), 1000);
   }, this)
   .start();
2 Likes

thank you so much @drinkbepis :slight_smile: works perfectly

1 Like