Aframe Rotate Down

Question

I am working on an Aframe project and want to have a control/event that allows an entity to rotate down.

I'm trying to create a new animation and put that as a child object on the entity. This has good results turning left and right along the x axis, but I can't seem to get it working to rotate the box down.

In some cases, like {z: 90, x:90, y: 0}, there's no way to rotate the face that is pointing at the camera down. Changing to y, or z does not make a difference.

I created a minimal plunker to show the issue. https://plnkr.co/edit/B6apT3?p=preview

Edit: Adding the code from the original plunker.

To turn down I am using the following logic.

if(rotateOnY){
  z -= 90;
} else {
  y -= 90;
}
changePosition(x, y, z);

And to change the position I use the following function.

function changePosition(x, y, z){
  let animation = document.createElement('a-animation');
  animation.setAttribute("attribute","rotation");
  animation.setAttribute("dur", 300);
  animation.setAttribute("repeat", "0");
  animation.setAttribute("to",`${z} ${x} ${y}`);
  document.getElementById('box').appendChild(animation);
  document.getElementById('position-text').setAttribute('text', `value: Position(x, y, z): ${x} ${y} ${z}`)
}

---

There was a really helpful answer, but the rotations using Tween don't quite work.

We can change the logic to something like this, but the math isn't quite working correctly as can be seen in http://plnkr.co/edit/hr2l83?p=preview

const originalEuler = new THREE.Euler(x, y, z);
const originalQuaternion = new THREE.Quaternion();
originalQuaternion.setFromEuler(originalEuler);

var tarQ = originalQuaternion.premultiply(q);

var euler = new THREE.Euler();
euler.setFromQuaternion(tarQ);
let rot = { // rot not pos
  x: THREE.Math.radToDeg(euler._x),
  y: THREE.Math.radToDeg(euler._y),
  z: THREE.Math.radToDeg(euler._z)
};
// update to neares 45
for(let axis of Object.keys(rot)){
  rot[axis] = nearest45(rot[axis]);
}
// update global x, y, z;
x = rot.x; y = rot.y; z = rot.z;
changePosition(rot.x, rot.y, rot.z);

Answer 1

EDIT: apologies - while accurate, my original answer wasn't as helpful as it could have been. After some further digging, I found a handy clean way to apply world rotation without getting a phd in math, that essentially boils down to:

var q = new THREE.Quaternion(); // create once and reuse q.setFromAxisAngle( dirVec, Math.PI/2 );// desired world rotation axis, 90 degrees in radians var tarQ = box.quaternion.premultiply( q );

see updated plunker

(note that in order to tween the transition, I resorted to cloning the original quaternion, making the operation on it, then setting it as the target for the tween.)

---

Welcome to the wonderfully painful world of 3D rotation.

In 3D math terms, you want to be rotating your object in world space, as opposed to local/mesh space - the latter implicitly allows for a world of problems including what I believe is the issue you're running into here - gimbal lock.

Translating to and from both spaces involves a bit of matrix maths and takes some getting used to but luckily three has some excellent helper methods. See the great answer here for a detailed explanation of such conversions: Set an object's absolute rotation around the world axis