0

I'll use a Rubik's cube as an example to illustrate my question. Let's say I have decided to put my 3x3x3 array of cubes centered around (x=1,y=1,z=1), instead of the origin. Now, I want to rotate one cube-face about the axis parallel to the x-axis which passes through my center (1,1,1).

My question is, how can I do this using a single parent Object3D object containing the cubes in the face to be rotated?

I can achieve the desired result by using another Object3D- a grandparent.

//translate the parent object so that the face is centered at (0,0,0)
parent.position.y = -1;
parent.position.z = -1;

// translate the grandparent object so the face center is back at (1,1,1)
grandparent.position.y = 1;
grandparent.position.z = 1;

then in the render loop..

grandparent.rotation.x += .01;

I thought I would be able to do it by translating the parent before adding the face-cubes to it, but the fact is that Object3D instances use the translation from the world origin to their children as their initial translation, even if the Object3D instance is not at the origin.

Also, it's probably an easier solution to just center the cube on the origin in this scenario... but the cube is just an example.

Thank you!

Jonathan Wilson
  • 1
  • This SO answer may help you: http://stackoverflow.com/questions/31953608/rotate-object-on-specific-axis-anywhere-in-three-js-including-outside-of-mesh/32038265#32038265 – WestLangley Sep 27 '15 at 16:17

1 Answers1

1

You need look at matrix operations of rotation and translation: THREE.Matrix4().makeRotation and THREE.Matrix4().makeTranslation

[ http://threejs.org/docs/#Reference/Math/Matrix4 ]

Here is a simple example of the similarity of the cube-Rubik: http://jsfiddle.net/bvg83kku/

stdob--
  • 28,222
  • 5
  • 58
  • 73
  • Ok, thank you, I see how the Matrix4() translation and rotation methods are used. Just translate to the desired position relative to the axis, rotate, and translate back to the original position. I modified the code to move the whole cube around: jsfiddle.net/g8c5fzdw However, the example you provided uses an array to keep track of each layer of 9 cubes. My original question was how to do this using an Object3D to keep track of each face. – Jonathan Wilson Oct 04 '15 at 01:24