# Tweening camera.fov in VR?

**URL:** <https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957>\
**Category:** Questions\
**Tags:** camera-controls, webvr\
**Created:** [October 9, 2017, 6:28pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957 "2017-10-09T18:28:46Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![batchku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/batchku/32/489_2.png) [@batchku](https://discourse.threejs.org/u/batchku)\
**Post date:** [October 9, 2017, 6:28pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/1 "2017-10-09T18:28:46Z")

</div>

Hello!

I’m working on a mobile VR application where I’d like to tween the .fov parameter of the camera. I’m using the Tween.js library, and the tweening looks like this:

```auto
var tweenRoomOut = new TWEEN.Tween(camera)
.to({fov: 110},1000)
.easing(TWEEN.Easing.Linear.None)
.onUpdate( () => {})
.onComplete( () => {})
.start();

```

This works very well, both on a computer browser and in mobile, when the application is not in VR mode, but when I switch to the VR camera, the tweens no longer do anything.

The vr camera is a `THREE.PerspectiveCamera` and i’m making sure to update the camera in my update loop:

```auto
camera.updateProjectionMatrix();

```

What am i missing?

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [October 10, 2017, 2:20pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/2 "2017-10-10T14:20:22Z")

</div>

`camera.fov` is ignored in VR. We use the `fov` information the headset gives us.

---

<div class="post-metadata">

**Author:** ![batchku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/batchku/32/489_2.png) [@batchku](https://discourse.threejs.org/u/batchku)\
**Post date:** [October 10, 2017, 2:58pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/3 "2017-10-10T14:58:05Z")

</div>

Thanks @mrdoob

What would you recommend, if that’s the effect i’m going for? Is there a way to override this behavior?

Alternatively:  
In my application, the camera is at 0,0,0 and there is a sphere with an image texture also centered at 0,0,0 . I can get a similar effect as tweening the fov if i move the sphere towards and away from the camera. I do it by first getting the camera look at world direction, and then moving the sphere in that direction:

```auto
    var vector = new THREE.Vector3(0,0,0);
    this.camera.getWorldDirection( vector );
    var tweenRoomOut = new TWEEN.Tween(this.sphereMesh.position).to({
        x: -1 * vector.x * 100,
        y: -1 * vector.y * 100,
        z: -1 * vector.z * 100
    },1000).easing(TWEEN.Easing.Linear.None).onUpdate( () => {})
   .onComplete( () => {})
   .start();

```

However, I’m finding that this too behaves different with the VR camera; instead of moving towards or away from the camera, the sphere moves sideways in VR mode.

What am I missing in this case?

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [October 16, 2017, 12:55pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/4 "2017-10-16T12:55:19Z")

</div>

> What would you recommend, if that’s the effect i’m going for? Is there a way to override this behavior?

Hmm… Maybe modifying `camera.scale` works?

> However, I’m finding that this too behaves different with the VR camera; instead of moving towards or away from the camera, the sphere moves sideways in VR mode.

The camera position and rotation gets overwritten by the headset position and rotation. Add you camera to a group and animate the group instead.

---

<div class="post-metadata">

**Author:** ![batchku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/batchku/32/489_2.png) [@batchku](https://discourse.threejs.org/u/batchku)\
**Post date:** [October 22, 2017, 10:16am UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/5 "2017-10-22T10:16:57Z")

</div>

> Hmm… Maybe modifying `camera.scale` works?

this seems like a good idea.  
I don’t see any mention of ‘camera.scale’ in the perspecrive camera documentation:  
[https://threejs.org/docs/#api/cameras/PerspectiveCamera](https://threejs.org/docs/#api/cameras/PerspectiveCamera)

when i try to change the camera.scale, i don’t see any effect.  
is it done like this:

camera.scale.set(1)

?

> The camera position and rotation gets overwritten by the headset position and rotation. Add you camera to a group and animate the group instead.

It seems like your suggest would apply to situations when one is modifying the camera (or a group that the camera is a part of). In the example I provided, I’m actually not modifying the camera position, but rather the position of a sphere mesh that is around the camera; in this setup, i notice that moving the sphere in the direction of the camera look-at vector behaves differently in Vr mode and non VR mode. My question is, why would moving a geometry (not the camera) in the direction of the camera look at behave differently in VR mode and not? What I conclude is that this is returning different values for Vr mode and not:

this.camera.getWorldDirection( vector );

so, how do i get the real camera world direction, in VR mode?

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [October 22, 2017, 12:21pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/6 "2017-10-22T12:21:07Z")

</div>

Cameras inherit from [Object3D](https://threejs.org/docs/#api/core/Object3D) and scale is defined there. It’s a Vector3, so you can do

`camera.scale.set(1, 1, 1)`

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [October 22, 2017, 2:53pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/7 "2017-10-22T14:53:53Z")

</div>

> [@batchku](#):
>
> In the example I provided, I’m actually not modifying the camera position, but rather the position of a sphere mesh that is around the camera; in this setup, i notice that moving the sphere in the direction of the camera look-at vector behaves differently in Vr mode and non VR mode.

Ah! Interesting… I may be able to fix that…

---

<div class="post-metadata">

**Author:** ![batchku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/batchku/32/489_2.png) [@batchku](https://discourse.threejs.org/u/batchku)\
**Post date:** [October 22, 2017, 3:36pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/8 "2017-10-22T15:36:14Z")

</div>

Oh great. Please let me know if you’d like me to that something.

I also discovered that the camera has a “zoom” property. Would you expect this to work in VR mode or is it also overwritten, like the “fov” property?

---

<div class="post-metadata">

**Author:** ![batchku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/batchku/32/489_2.png) [@batchku](https://discourse.threejs.org/u/batchku)\
**Post date:** [October 28, 2017, 1:57pm UTC](https://discourse.threejs.org/t/tweening-camera-fov-in-vr/957/9 "2017-10-28T13:57:09Z")

</div>

I have confirmed that the ‘zoom’ property also only works in non-VR mode.