Attempting to rotate a torus along 2 axes: Ox and Oz. The goal is to apply this rotation with a slider from dat.gui that is modified by mouse input.
The torus is defined as follows:
var geometryTorus = new THREE.TorusGeometry( radius, 2*widthLine, 100, 100 );
var materialLine = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
torus = new THREE.Mesh( geometryTorus, materialLine );
scene.add(torus);
The issue is that the rotation along the Ox axis works fine, but the rotation along the Oz axis does not function as expected.
The rotation for the torus is handled by the following function:
// Change great circle parameters
function changeGreatCircle(thetax, thetaz) {
// Update rotation angles
torus.rotation.x = thetax;
torus.rotation.z = thetaz;
}
In the above function, the render('init') function is called to compute the camera position.
How can the torus be rotated along the Oz axis? Why does it rotate along the Ox axis but not the Oz axis?
If anyone has any clues or suggestions, it would be greatly appreciated.
Thank you
UPDATE 1:
The solution has been found by considering the Euler angles, specifically the order of the 2 rotations (around the X and Y axis). Setting torus.rotation.order = 'ZXY'; resolved the issue.