Three.js - Torus is not rotating around 0z axis

Question

I try to make rotate a torus along 2 axis : Ox and Oz. I want to apply this rotation with a slider dat.gui modified by mouse.

I have defined the torus by :

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);

My issue is that rotation along Ox axis is working fine but this is not the case for rotation along Oz axis.

I do the rotations for torus by calling the following function :

// Change great circle parameters
function changeGreatCircle(thetax, thetaz) {

// Update rotation angles 
torus.rotation.x = thetax;
torus.rotation.z = thetaz; 

}

For above function, I call render('init') function in which I compute the position of camera.

How to make rotate this torus along Oz axis ? Why does it rotate along Ox axis and not along Oz axis ?

If someone could give clues, this would be fine.

Thanks

UPDATE 1 :

I found out solution because I didn't take into account of the Euler angles, i.e the order of the 2 rotations (around X and Y axis). The solution was to set torus.rotation.order = 'ZXY';

Does this : http://stackoverflow.com/questions/11060734/how-to-rotate-a-3d-object-on-axis-three-js help? — ThisIsSparta, Oct 05 '16 at 23:11
My understanding is the following. The torus is symmetric around its Z-axis, which coincides initially with the Z-axis of the "world" (and of the camera). After rotating the torus by PI/2 around its X-axis, its Y-axis is now along the Z-axis in world coordinates. That is why you have to rotate the torus around its Y-axis to stay fixed on the screen while the camera rotates around the Z-axis. — ConnorsFan, Oct 12 '16 at 19:25
ConnorsFan: Thanks for your help, I think I have found out what's wrong but I have to do other tests to confirm. — , Oct 12 '16 at 23:51
@ConnorsFan: could you remove please the link of your jsfiddle (above in your comment), i.e jsfiddle.net/ztu3bjuu/5 . Thanks in advance — , Oct 14 '16 at 10:38

Ramil Kudashev · Accepted Answer · 2016-10-11T18:25:39.470

I have made a fiddle that demonstrates that all three mesh.rotation components work fine. Based on what could be found in THREE source code following things occur when you set rotation of Object3D (and, respectively, Mesh):

In THREE.Object3D: quaternion.setFromEuler( rotation, false ); happens.
In THREE.Quaternion and THREE.Euler (our mesh.rotation components are Euler angles) we could see that rotation is dependent on order of application. Default rotation order in THREE.Euler is 'XYZ'.
Standard shader program in THREE takes object transform as matrix. In THREE.Object3D you could see this.matrix.compose( this.position, this.quaternion, this.scale ); call.
This transform is applied to object parent's transform to get object.matrixWorld which is used for drawing.

So speaking of your issue: you apply rotation on torus and camera on different axes, that is why camera doesn't follow torus (and torus is not fixed relatively to the world space then you change torus.rotation.z). Keep in mind that rotations are applied in series.

If desired behavior couldn't be achieved by inserting dummy objects and tweaking order of rotations - you could construct your own material and pass more parameters as uniforms to use in shader program. In this case it is not needed though.

If this doesn't help please construct a minimal example that demonstrates your problem.

mlkn: thanks for your answer. I think that I have found out maybe what's wrong. I will ask another question to get more precisions and to understand better this potential solution. — , Oct 12 '16 at 23:57

Three.js - Torus is not rotating around 0z axis

1 Answers1