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

score 11 · Accepted Answer · answered Jul 28 '13 at 10:56

11

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

answered Jul 28 '13 at 10:56

George Profenza

50,687
19
144
218

thanks dude, but it still rotate at the (0,0,0) point in, axis direction! see this: http://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) – MeTe-30 Jul 28 '13 at 11:41
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);object2.x = 100` at the top of your code when you setup, then simply `group.rotation.y += radians` – George Profenza Jul 28 '13 at 13:25
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) – MeTe-30 Jul 28 '13 at 15:20
2

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. – George Profenza Jul 28 '13 at 19:04
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 ... ? – MeTe-30 Jul 29 '13 at 04:44
3

Sure! I warmly recommend [this course](https://www.udacity.com/course/cs291) to you. It's very nicely explained, has excercises and it's all using three.js. Chapter4: Transforms is what you're after – George Profenza Jul 29 '13 at 10:10

score 5 · Answer 2 · answered Jul 27 '18 at 12:28

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

Alberto Piras · Answer 3 · 2019-03-18T15:43:24.817

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.

three.js rotate Object3d around Y axis at it center

UPDATE:

3 Answers3

Linked