如何通过 TransformControls 在三个.js 中围绕自己的中心旋转 Object3D

Question

我想将Object3D（它的网格组）旋转TransformControls。
所以我将TransformControls附加到Object3D，并将TransformControls的位置设置为Object3D的中心。

这是试用过的代码：

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

但是当我尝试使用 TransformControls 旋转时，Object3D 围绕世界轴而不是他自己的中心旋转。
我该如何解决？
请任何人帮助。

PS：我不想移动meshGroup的位置。

Answer 1

我遇到了同样的问题，我通过移动对象位置解决了居中问题。

看看下面的stackblitz。我在不知道您使用什么框架/库的情况下创建了这个示例，但我是用打字稿制作的。