1

I want to rotate all objects in a scene around the origin 0,0,0 along the x axis. However, setting obj.rotation.x += 0.1; doesn't rotate along the origin, but along the the center of the object instead. How can I achieve the desired rotation of the object around the origin? I feel that there should be an easy way, but could not find any in the official docs or online.

logical x 2
  • 311
  • 4
  • 18

2 Answers2

2

Instead of adding the objects to the scene, add them to a THREE.Group() object:

var group = new THREE.Group();
scene.add(group);
...
var mesh1 = new THREE.Mesh(...);
group.add(mesh1);
var mesh2 = new THREE.Mesh(...);
group.add(mesh2);
//and so on with meshes

and then in the render loop:

group.rotation.x += 0.1;

Threejs.r84

prisoner849
  • 16,894
  • 4
  • 34
  • 68
  • @prisonder849 I did that and it worked. Thanks for the quick reply : ) I will wait a bit before I accept it as an answer. – logical x 2 Feb 20 '17 at 16:38
1

You can use THREE.Object3D()
Add all your meshes to an object with myObject.add(myMesh)
And then use myObject.rotateX(angle)
where the angle is in radians, myObject is an Object3D object and myMesh is the mesh to be added.
This will rotate the object around x-axis in local space.
More can be found in the documentation: Object3D

xxx
  • 1,153
  • 1
  • 11
  • 23
Rishabh Gupta
  • 389
  • 6
  • 19
  • Nice and thanks for the quick reply : ) What is the difference to the solution with grouping provided by prisoner849? Both approaches seem similar to me. It seems overkill to me having to change the structure of the scene just for achieving rotation around the origin. So I was searching for a simpler solution. Just from a separation of concerns point of view it looks odd to me that regrouping of the objects in the scene is necessary to achieve rotation around the origin. But anyway, both solutions seem to work fine, so thanks : ) – logical x 2 Feb 20 '17 at 17:54
  • 1
    @deusexmachina There's not so much difference between `THREE.Group()` and `THREE.Object3D()` ) [Documentation](https://threejs.org/docs/index.html#Reference/Objects/Group) says: _This is almost identical to an Object3D. It's purpose is to make working with groups of objects syntactically clearer._ – prisoner849 Feb 20 '17 at 20:27
  • 1
    @deusexmachina There's no difference between these two, just the name. I generally like to use `Object3D` since I feel comfortable with this name (just personal choice). If you want to see the difference between the two you can head to: [Group.js code](https://github.com/mrdoob/three.js/blob/master/src/objects/Group.js). It imports `Object3D` and just change it's type to 'Group'. – Rishabh Gupta Feb 22 '17 at 05:22