three.js rotate Object3d around Y axis at it center

Question

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

Solution 1

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

Solution 2

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);
    }
}

Comments

[MeTe-30]

thanks dude, but it still rotate at the (0,0,0) point in, axis direction! see this: threejs.org/examples/canvas_geometry_cube.html I want something like this, but without using camera rotaion, plus my object is far from (0,0,0)

[George Profenza]

you might want to rephrase your question: I thought you wanted to rotate on an arbitrary axis. after reading your question again and your comment it sounds like you want to rotate multiple objects as a group against the group's centre. You can easily do that using creating your group first and using the group's rotation:var group = new THREE.Object3D();group.add(object1);group.add(object2);objec‌​t2.x = 100 at the top of your code when you setup, then simply group.rotation.y += radians

[MeTe-30]

yes, you got my purpose, but if you read my question again, i said, i tried group.rotation.y += deg, but it doesn't rotate around group center! it rotate around (0,0,0)

[George Profenza]

of course it does, that is the default behaviour. you've got two options: 1. create a translation matrix and apply it to the group. option 2, which might be easier for you, use another group(2) to nest the first(1)...translate group1 (the one containing your objects) and rotate group2, the one containing group1.

[MeTe-30]

Thanks a lot, i got this. I'm new on three.js, can you please give me a link to read more about translation and ... ?

[George Profenza]

Sure! I warmly recommend this course to you. It's very nicely explained, has excercises and it's all using three.js. Chapter4: Transforms is what you're after