时间戳

首页 > 解决方案 > 如何通过 TransformControls 在三个.js 中围绕自己的中心旋转 Object3D

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

问题描述

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

这是尝试过的代码：

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

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

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

标签： three.jsrotationtransform

解决方案

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

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

推荐阅读