How to rotate Object3D in three.js around own center by TransformControls

Question

I want to rotate Object3D(it's mesh group) by TransformControls.
So I attached TransformControls to Object3D and set position of TransformControls to Object3D's center.

Here is tried code:

let transformControl = new THREE.TransformControls(viewer.camera, viewer.canvas);
transformControl.setMode("rotate");
transformControl.setSpace("local");

let meshGroup = new THREE.Group();

// here I added lot of mesh to meshGroup.
............ 

let bbox = new THREE.Box3();
bbox.setFromObject(meshGroup);
let center = new THREE.Vector3(0,0,0);
center = bbox.getCenter(center);
center.sub(meshGroup.position);
transformControl.position.set(center.x, center.y, center.z);
transformControl.attach(meshGroup);

But when I tried rotation with use TransformControls, Object3D rotate around world axis instead his own center.
How can I fix it?
Please anyone help.

PS: I don't want move position of meshGroup.

Alejandro Alvarado Alejandro Alvarado · Accepted Answer · 2021-02-08T17:30:21

I faced the same problem and I solved the centering problem by shifting object positions.

Take a look at the following stackblitz. I created this sample without knowing what framework/library you used but I made it in typescript.

How to rotate Object3D in three.js around own center by TransformControls

1 Answers