Three.js: Rotate a cube around it's edge.

Created on 5 Feb 2012 · 5Comments · Source: mrdoob/three.js

Hi, Everybody!

I was asking already about rotations around an arbitrary axis and got clear answers posted in #1219 and #1220.

But it's still unclear how to rotate a cube around one of it's edges (could anyone to share such a code if it exists).

There were posted two functions in #1219:

function rotateAroundObjectAxis( object, axis, radians ) { .. }

and

function rotateAroundWorldAxis( object, axis, radians ) { .. }

They allow me to rotate a cube about an arbitrary axis that goes through the center of it's bounding box.

What I need is to rotate an object around an arbitrary axis which is not necessarily goes though the object's center.

How to do that correctly?

Sorry, if I'm a bit annoying about that but I want to implement such a functionality.

Thanks.

P.S. It seems that I need a function that looks like:

function rotateAroundArbitraryAxis( object, axisDirection, axisBasePoint, radians ) { .. }

by axisBasePoint I mean the point the specified axis goes through.

I read on the Internet that such a rotation should be done in several steps:

translate space so that the rotation axis passes through the origin.
rotate space about the Z axis so that the rotation axis lies in the XZ plane.
rotate space about the Y axis so that the rotation axis lies along Z axis.
perform the desired rotation by Theta about the z axis.
apply the inverse of step (3).
apply the inverse of step (2).
apply the inverse of step (1).

Do I understand it correctly?

How to perform such an operation with three.js?

I tried to multiply different (translation/rotation) matrices with each other in three.js but did not get the desired result :-(

Many thanks.

Question

Source

ghost

Most helpful comment

What about something like this?

var dummy = new THREE.Object3D();
dummy.position.x = 50;
dummy.position.z = 50;
scene.add( dummy );

var cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial() );
cube.position.x = - 50;
cube.position.z = - 50;
dummy.add( cube );

mrdoob on 6 Feb 2012

👍3

All 5 comments

What about something like this?

var dummy = new THREE.Object3D();
dummy.position.x = 50;
dummy.position.z = 50;
scene.add( dummy );

var cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial() );
cube.position.x = - 50;
cube.position.z = - 50;
dummy.add( cube );

mrdoob on 6 Feb 2012

👍3

Thanks for the reply.

Unfortunately, the cube in your example still rotates around it's local axis that goes through it's center no matter what I call:

function rotateAroundObjectAxis( object, axis, radians ) { .. }

function rotateAroundWorldAxis( object, axis, radians ) { .. }

What I really want to figure out is how to shift the axis of rotation of a particular object.

Many thanks.

ghost on 6 Feb 2012

Did you try rotating the dummy/container instead of the cube?

oosmoxiecode on 6 Feb 2012

Good point. It works this way.

But why it's not so straitforward :-) ?

I thouht it should be some matrices arithmetic using the function I suggested in my initial post or something more convenient.

function rotateAroundArbitraryAxis( object, axisDirection, axisBasePoint, radians ) { .. }

by axisBasePoint I mean the point the specified axis goes through.

With kind regards.

ghost on 6 Feb 2012

@oosmoxiecode Uops! Yeah, forgot that on my snippet.

@Landlord Well, it's straightforward to me. It doesn't even require matrices knowledge ;) I guess is just a matter of thinking differently... Either way, internally, the same matrix calculations are happening.

mrdoob on 6 Feb 2012

Was this page helpful?

0 / 5 - 0 ratings