three.js rotate Object3d around Y axis at it center

9
votes

I have an Object3d in Three.JS that is a group of some Mesh objects.
I want to rotate this group around the Y axis, at it center, that is far from world center (0,0,0).
I just know the Group.rotate.y += deg code, but for each axis direction it always rotate the object around (0,0,0), not my group center!
How can i fix this?

UPDATE:

Read the comments

3
3drotationthree.js

3 Answers

9
votes

Have a look at Object3D's rotateOnAxis(axis, angle) function. It should be something like:

//declared once at the top of your code
var axis = new THREE.Vector3(0.5,0.5,0);//tilted a bit on x and y - feel free to plug your different axis here
//in your update/draw function
rad += radIncrement;
object.rotateOnAxis(axis,rad);

HTH

5
votes

This answer helped me, but the code isn't quite correct. The axis has to be a unit vector, and object.rotateOnAxis() is incremental.

Here is a working example:

var axis = new THREE.Vector3(4, 0, 7).normalize();
var speed = 0.01;

// set up scene, etc.

function animate () {

    // other code

    if (object) {
        object.rotateOnAxis(axis, speed);
    }
}
0
votes

See How to rotate a 3D object on axis three.js?

I solved this problem this way:

I created the 'ObjectControls' module for ThreeJS that allows you to rotate a single OBJECT (or a Group), and not the SCENE.

Include the libary:

Usage:

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

You can find a live demo here: https://albertopiras.github.io/threeJS-object-controls/

Here is the repo: https://github.com/albertopiras/threeJS-object-controls.