famo.us - multiple rotation - switching axis

Question

I started playing with famo.us and created cube which rotates left/right or up/down when pressing buttons.

rotation left:

y+=-Math.PI/2;
trans=Transform.rotate(x,y,z);

rotation top:

x+=-Math.PI/2;
trans=Transform.rotate(x,y,z);

this works in one direction, but if I turn up and than turn left if does not produce desired result because axis are changing with first rotation. So basically it rotates around wrong axis

there is similar thread here Controling CSS cube rotation(transform) and extracting values from 3d matrix

but it is using pure css transformations and compositing rotations. I wonder if it can be fixed easily with some famo.us matrix multiplication or using quaternions.

Answer 1

Let's use a Modifier with it's transformFrom to control your cube rotation as was done in the examples. Then we will use the Quaternion to return a transform based on a multiplier Quarternion.

Example and running code here

Setup our Quaternions

var quaternion = new Quaternion(1, 0, 0, 0);
var moveQuaternion = new Quaternion(185, 0, 0, 0);

Setup our rotation Modifier

  var rotationModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

Transform from the quaternion

  rotationModifier.transformFrom(function() {
    return quaternion.getTransform();
  });

Calculate the quaternion using a multiplier on engine tick

  Engine.on('prerender', function() {
    // You combine rotations through quaternion multiplication
    quaternion = quaternion.multiply(moveQuaternion);
  });

Add the rotation Modifier and Box to the context

 mainContext.add(rotationModifier).add(createBox(260, 260, 260));

Here is our key controller event handler

  Engine.on('keyup', function(e) {
    console.log('keyEvent',e.keyIdentifier);
    var x = quaternion.x;
    var y = quaternion.y;
    var z = quaternion.z;
    switch (e.keyIdentifier) {
      case 'Up':
        x = -1; y = 0; z = 0;
        break;
      case 'Down':
        x = 1; y = 0; z = 0;
        break;
      case 'Left':
        x = 0; y = 1; z = 0;
        break;
      case 'Right':
        x = 0; y = -1; z = 0;
        break;
      case 'Home':
        x = -1; y = 1; z = 0;
        break;
      case 'PageUp':
        x = -1; y = -1; z = 0;
        break;
      case 'End':
        x = 1; y = 1; z = 0;
        break;
      case 'PageDown':
        x = 1; y = -1; z = 0;
        break;
      case 'Clear':
        x = 0; y = 0; z = 0;
        break;
      default:
        x = 1; y = 1; z = 1;
    }
        moveQuaternion = new Quaternion(185, x, y, z);
    });