Currently, I am working on tween-rotating a 3D cube. Thanks to this helpful post (How to rotate a object on axis world three.js?), I have successfully achieved rotation without any issues. Now, my goal is to transfer the rotation achieved through setFromRotationMatrix to use it as the end rotation for my tween animation.
UPDATE:
Here is my current progress:
// function for rotating dice
function moveCube() {
// resetting parent object rotation
pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();
// attaching dice to pivot object
THREE.SceneUtils.attach( dice, scene, pivot );
// setting variables for rotation direction
var rotateZ = -1;
var rotateX = -1;
if (targetRotationX < 0) {
rotateZ = 1;
} else if (targetRotationY < 0) {
rotateX = 1;
}
// determining which drag direction was higher
if (Math.abs(targetRotationX) > Math.abs(targetRotationY)) {
// rotating
var newPosRotate = {z: rotateZ * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
//rotateAroundWorldAxis(dice, new THREE.Vector3(0, 0, rotateZ), Math.PI / 2);
} else {
// rotating
var newPosRotate = {x: -rotateX * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
//rotateAroundWorldAxis(dice, new THREE.Vector3(-rotateX, 0, 0), Math.PI / 2);
}
// detaching dice from parent object
THREE.SceneUtils.detach( dice, pivot, scene );
}
Thanks to WestLangley, I believe I am getting closer to a solution that is simple and effective. By initializing the pivot object with the same position as the dice, the rotation will still be centered around the dice's center.
var loader = new THREE.JSONLoader();
loader.load(
'models/dice.json',
function ( geometry, materials ) {
material = new THREE.MeshFaceMaterial( materials );
dice = new THREE.Mesh( geometry, material );
dice.scale.set(1.95, 1.95, 1.95);
dice.position.set(2.88, 0.98, 0.96);
scene.add( dice );
pivot = new THREE.Object3D();
pivot.rotation.set( 0, 0, 0 );
pivot.position.set(dice.position.x, dice.position.y, dice.position.z);
scene.add( pivot );
}
);
The current solution I have implemented (shown in the above snippet) does not properly attach the dice to the pivot object as its parent. I may be missing something quite basic...
UPDATE END