Currently, I am working with a scenario where a Mesh is nested within an Object3D. The goal is to rotate the Object3D on the x and y axes while dragging it, and then reset the rotation of the Object3D to 0, 0, 0 upon release, transferring its rotation to the nested Mesh.
Although my approach seems to work initially, it breaks after the first movement. I suspect that the issue might be related to the Euler order.
The code snippet I am using is as follows:
function mouseDown(e) {
hold.x = e.pageX;
hold.y = e.pageY;
window.addEventListener('mousemove', mouseMove);
}
function mouseMove(e) {
var diffX = e.pageX - hold.x;
var diffY = e.pageY - hold.y;
object.rotation.x = (diffY * 0.25) * RADIAN;
object.rotation.y = (diffX * 0.25) * RADIAN;
}
function mouseUp() {
window.removeEventListener('mousemove', mouseMove);
cube.rotation.x += object.rotation.x;
cube.rotation.y += object.rotation.y;
object.rotation.x = 0;
object.rotation.y = 0;
}
I have created a jsfiddle demonstrating this issue: http://jsfiddle.net/BJaju/4/