aframe/threejs camera manual rotation

Question

I am trying to manually tween camera rotation to 0,0:

camera.object3D.matrixAutoUpdate=false; 

var orgrot = { x : camera.object3D.rotation.x, y: camera.object3D.rotation.y };
var target = { x : 0, y: 0 };

var tween = new TWEEN.Tween(orgrot).to(target, 500);
tween.onUpdate(function(){
          camera.object3D.rotation.x= this.x;
          camera.object3D.rotation.y= this.y;
          camera.object3D.updateMatrix();

  });

The tween works as expected, but I am loosing mouse control over camera. To get it back I am setting matrixAutoUpdate to true

tween.onComplete(function(){
     document.querySelector('#camera').object3D.matrixAutoUpdate=true
});

But after that, the camera rotation changes back to original position (before tween ) and I would like to keep 0,0. What I am missing ? thanks

UPDATE Below is a version using aframe only without going into threejs objects

I think the problem is camera look-control component

When enabled - I can not animate camera rotation or even setAttribute. I have to disable it first - than fire animation and than enable it again.

But the problem is, when I enable it again:

camera.setAttribute ('look-controls-enabled',"true")

camera goes back to original rotation ( state before reset animation ). Similar problem when using matrixAutoUpdate=false/true

Here is my pen http://codepen.io/anon/pen/dMjrWd

If you rotate left 30deg, it will fire resetCamera animation - it works as intended. But only when look component is disabled. If I enable it again in "animationend" event - the rotation will go back to original state and trigger resetCamera again and again

Answer 1

You really should not have to mess with matrixAutoUpdate.

But given that you are, try the following to force the position, quaternion, and scale to match the matrix:

object.matrix.decompose( object.position, object.quaternion, object.scale );

three.js r.76

Answer 2

I see several problems. If you are using aframe you should not access the object3D directly. You should do

cameraEl.setAttribute('position', {x: 0, y: 0; z;0 })

You can apply a tween to any entity using the declarative API

If you want to modify the camera independently of the running tween you can wrap your camera in another entity

<a-entity rotation="0 360 0"><a-entity id="camera" camera><a-animation ...></a-animation></a-entity></a-entity>

Answer 3

try this codeblock, it works for me on aframe 0.8.2

static faceCameraToCoords(camera, coords){
    camera.setAttribute("look-controls",{enabled:false})
    camera.setAttribute("rotation", coords);
    var newX = camera.object3D.rotation.x
    var newY = camera.object3D.rotation.y
    camera.components['look-controls'].pitchObject.rotation.x = newX
    camera.components['look-controls'].yawObject.rotation.y = newY
    camera.setAttribute("look-controls",{enabled:true})
}

Answer 4

You can no longer set a-camera rotation after version 0.8.0.

Updated solution for Aframe 0.9.2:

Given the following camera setup:

<a-entity
  id="rig"
  position="0 1.6 0">
  <a-camera position="0 0 0"></a-camera>
</a-entity>

You can directly alter the camera rotation thus:

const cameraEl = document.querySelector('a-camera');
cameraEl.components['look-controls'].pitchObject.rotation.x = newRotation.x;
cameraEl.components['look-controls'].yawObject.rotation.y = newRotation.y;

Make sure the newRotation values are in radians. For example, use THREE.Math.degToRad(newRotation.x).