StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here are the two functions I use. They are based on matrix rotations. and can rotate around arbitrary axes. To rotate using the world's axes you would want to use the second function rotateAroundWorldAxis().</p> <pre><code>// Rotate an object around an arbitrary axis in object space var rotObjectMatrix; function rotateAroundObjectAxis(object, axis, radians) { rotObjectMatrix = new THREE.Matrix4(); rotObjectMatrix.makeRotationAxis(axis.normalize(), radians); // old code for Three.JS pre r54: // object.matrix.multiplySelf(rotObjectMatrix); // post-multiply // new code for Three.JS r55+: object.matrix.multiply(rotObjectMatrix); // old code for Three.js pre r49: // object.rotation.getRotationFromMatrix(object.matrix, object.scale); // old code for Three.js r50-r58: // object.rotation.setEulerFromRotationMatrix(object.matrix); // new code for Three.js r59+: object.rotation.setFromRotationMatrix(object.matrix); } var rotWorldMatrix; // Rotate an object around an arbitrary axis in world space function rotateAroundWorldAxis(object, axis, radians) { rotWorldMatrix = new THREE.Matrix4(); rotWorldMatrix.makeRotationAxis(axis.normalize(), radians); // old code for Three.JS pre r54: // rotWorldMatrix.multiply(object.matrix); // new code for Three.JS r55+: rotWorldMatrix.multiply(object.matrix); // pre-multiply object.matrix = rotWorldMatrix; // old code for Three.js pre r49: // object.rotation.getRotationFromMatrix(object.matrix, object.scale); // old code for Three.js pre r59: // object.rotation.setEulerFromRotationMatrix(object.matrix); // code for r59+: object.rotation.setFromRotationMatrix(object.matrix); } </code></pre> <p>So you should call these functions within your <code>anim</code> function (requestAnimFrame callback), resulting in a rotation of 90 degrees on the x-axis:</p> <pre><code>var xAxis = new THREE.Vector3(1,0,0); rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload