7

I've modified this single spinning cube so that it contain 3 cubes in an Object3D

http://jsfiddle.net/VsWb9/1243/

In the above example it uses the first cube. I need it to rotate on a single axis at the exact center of the object.

The object3D code 

  geometry = new THREE.CubeGeometry(50, 50, 50);
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Object3D();
    mesh1 = new THREE.Mesh(geometry, material);
    mesh1.position.x = 50;
    mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.x = 100;
    mesh3 = new THREE.Mesh(geometry, material);

    mesh.add(mesh1);
    mesh.add(mesh2);
    mesh.add(mesh3);

    scene.add(mesh);

Here is the rotation

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

EDIT: Just to say that this is an example to demonstrate the problem, my actual code object contains many different sized shapes.

jim smith
  • 2,394
  • 5
  • 29
  • 35

2 Answers2

15

You may define the coordinates of the center.

mesh.position.set( center.x, center.y, center.z );
mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -center.x, -center.y, -center.z ) );
hayaishi
  • 166
  • 1
  • 3
  • 6
    Over a year later just googled with the same problem and found my own question as the top result! +1 this answer! – jim smith Sep 09 '14 at 18:04
1

The really easy way is to just position your cubes slightly differently, so instead of setting

mesh1.position.x = 50;
mesh2.position.x = 100;

and leaving mesh3 to default to an x of 0, you can set them like this:

mesh1.position.x = -50;
mesh3.position.x = 50;

Which will make the center box also be at the center of the scene.

jsFiddle showing it working.

Ken Herbert
  • 5,205
  • 5
  • 28
  • 37
  • I was hoping there is a recursive solution, the spinning cube in the jsfiddle is just an example...the object in my code contains loads of cubes, planes etc - I was thinking the answer may lie in getting the center xyz of the object and then somehow applying it to the rotation... – jim smith Jul 31 '13 at 22:01
  • 1
    I would take a look at the accepted answer in [this question](http://stackoverflow.com/questions/11060734/how-to-rotate-a-3d-object-on-axis-three-js) then. It may be exactly what you need. – Ken Herbert Jul 31 '13 at 22:08