Cubic Quaternion Rotation Animation

Question

I created this Rubiks cube with Papervison3D. With some resources, I created a cube with 27 mini-cubes inside (3 * 3 * 3 = 27). Rotation of the Rubik's Cube to move the mouse is already done. (I do not rotate the camera.)

All the behavior of the Rubiks cube is already there. But I was a bit stuck in the final phase.

When I play with it, as if I was working with a regular Rubiks Cube, it worked fine, in addition, I know that the default Euler defaults are not reliable after a while. I need to rotate the Rubiks cube to the selected side and then rotate the Rubiks cube above the z axis so that the face of the minicub is facing up. I prefer to animate it with TweenMax, but I'm really stuck as I need quaternion rotations.

I know the chosen face of Rubiks Cube itself. I know the Euler rotation of the Rubik's Cube using Matrix3D.matrix2euler(_rubiksCube.transform); . I need to rotate it to the selected face, for example, when the current rotation is x: -20, y: 35, z: 10 , and I select the rubiksCube back face, which it should rotate to x:0, y: 180, z: 0 ,

I need to change this to Quaternion values ​​and turn the Rubibs Cube to the new Quaternion value. After that, he must rotate the Rubiks cube over the z axis in order to face up to the face of the selected minibus.

This is the code I use when dragging / rotating a Rubiks cube

 private function onMouseMove( e : MouseEvent) : void { var m : Matrix3D; m = Matrix3D.rotationY( (mouseX - _mouseDownPoint.x) / 120 ); m = Matrix3D.multiply( m, Matrix3D.rotationX( -(mouseY - _mouseDownPoint.y) / 120 )); _rubiksCube.transform = Matrix3D.multiply( m, _rubiksCube.transform ); _mouseDownPoint.x = mouseX; _mouseDownPoint.y = mouseY; } 

Answer 1

Quaternions are definitely the way to go. It has been a while since I used PV3D, but it looks something like this:

• Store Euler angles in separate variables (e.g. u, v, w). Accumulate these variables in the calculation.
• Create a quaternion using Quaternion.createFromEuler ();
• Convert using quaternion.matrix

For example:

 var yRotation:Number = 0; var xRotation:Number = 0; function mouseHandler(e:MouseEvent):void { yRotation += (mouseX - _mouseDownPoint.x) / 120; xRotation += -(mouseY - _mouseDownPoint.y) / 120); var q:Quaternion = Quaternion.createFromEuler(xRotation, yRotation, zRotation, true); _rubiksCube.transform = q.matrix; _mouseDownPoint.x = mouseX; _mouseDownPoint.y = mouseY; } 

Update: Ah, I read your question again. It looks like you want to smoothly interpolate the current orientation to the new orientation. What used to work for me:

• Get the current Euler position and convert to quaternion using Quaternion.createFromEuler ().
• Get target quaternion.
• Interpolate the time from the original quaternion to the target using quaternion.slerp ().

For example:

 function clickHandler(e:MouseEvent):void { qSource = qCurrent; qTarget = quaternion.createFromEuler(....); t = getTimer(); } function frameHandler(e:Event):void { if (isAnimating) { tDelta = (getTimer() - t) / 10000; // 10000 = 10 seconds qCurrent = slerp(qSource, qTarget, tDelta); _rubiksCube.transform = qCurrent.matrix; } }