javascript - How to Rotate an Object and Reset it's Rotation to Zero?

Question

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

Answer 1

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