2

The problem for the turnover is that the axis is attached to the geometry.

Now: http://f2.s.qip.ru/cMfvUhEy.png

Now (rotate): http://f3.s.qip.ru/cMfvUhEC.png

Necessary (rotate): http://f1.s.qip.ru/cMfvUhEG.png

Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
mixalbl4
  • 3,507
  • 1
  • 30
  • 44

2 Answers2

14
mesh.rotation.x = Math.PI / 180 * 90;

sets the rotation, it does not increment it.

In three.js, an object's orientation can be specified by its Euler rotation vector object.rotation. The three components of the rotation vector represent the rotation in radians around the object's internal x-axis, y-axis, and z-axis respectively.

The order in which the rotations are performed is specified by object.rotation.order. The default order is 'XYZ' -- rotation around the x-axis occurs first, then the y-axis, then the z-axis.

Rotations are performed with respect to the object's internal coordinate system -- not the world coordinate system. This is important. So, for example, after the x-rotation occurs, the object's y- and z- axes will generally no longer be aligned with the world axes. Rotations specified in this way are not unique.

For more information about Euler angles, see the Wikipedia article. Three.js follows the Tait–Bryan convention, as explained in the article.

EDIT: If you want to "reset" the rotation, see this answer.

three.js r.73

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • You do not understand the essence. Need to fix this rotation, something to be followed with respect to zero. – mixalbl4 Feb 08 '13 at 16:28
  • Sorry, I'm not understanding your English, and what your problem is. I added some more information to the post. Maybe it will help you. – WestLangley Feb 08 '13 at 16:55
  • Thank you! It works! . eulerOrder = 'ZYX';But the question is still open. How can we apply the figure of a turn and lose a turn on zero? To be able to rotate the shape as you like for whatever you like after the rotation axis without binding. Sorry for the English, Google translator, I am Russian ( – mixalbl4 Feb 08 '13 at 17:07
  • Draw this problem... [http://f2.s.qip.ru/cMfvUhDA.png](http://f2.s.qip.ru/cMfvUhDA.png) – mixalbl4 Feb 08 '13 at 17:23
  • Oh! A picture is worth a thousand words. :-) You cannot reset the rotation to zero. However, you can move each point in your original geometry: geometry.applyMatrix( new THREE.Matrix4().makeRotationY( radians ) ); It is not very efficient, though. ---- When you are happy with my answer, I will correct the English in your question and post a correct answer. You can then "accept" the answer by clicking on the check mark. – WestLangley Feb 08 '13 at 17:34
  • mesh.geometry.applyMatrix(...) == mesh.rotation. :( – mixalbl4 Feb 08 '13 at 17:52
1

If you want to rotate or otherwise transform an object, but then treat it as non-transformed for the purposes of further transformation, one approach is to add it to a new Object3D instance and apply the additional transforms to that:

var line = new THREE.Geometry();

line.vertices.push(
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 0, 10, 0 ),
);

line.rotation.z = 30 * Math.PI / 180;

var lineObject = new THREE.Object3D();
lineObject.Add(line);
// lineObject.rotation.z == 0 and its rotation axes align with the world
// you can perform any further rotations on lineObject

You can learn more about this transform-stacking approach from this video from the Udacity ThreeJS course:

https://www.youtube.com/watch?v=RBemS5NCVyw

The lecturer discusses how to rotate a clock's hand after it has been rotated, compared to ThreeJS' native rotate-then-translate behavior (so he's stacking a translation on a rotation, while you're performing two independent rotations, but the idea is the same).

staafl
  • 3,147
  • 1
  • 28
  • 23