Three.js 改变物体的旋转点

Question

我使用 Three.js 在网站上放置了一个汉堡包模型。随着网站的关闭，汉堡包会以各种方式轮换。在一个地方，它应该以大约 45 度的角度围绕自身旋转。 但是，它并不以对象的中心为枢轴点，因此它不是绕自身旋转，而是从左上角开始旋转。我怎样才能解决这个问题？ 面包旋转，如我在下面的链接中所示。相反，旋转点应该是面包的中间，并且应该在 y 轴上旋转。 [下面链接中的gif]

Answer 1

您的汉堡模型的原点不在其几何图形轴对齐边界框的中心。

如果您不想编辑汉堡的几何形状，您可以将其父级设置为一个空组，其本地位置等于所需的偏移量，以便汉堡的枢轴看起来是其视觉中心（或您想要的任何中心）希望它是）。然后，您不是直接修改汉堡，而是修改父汉堡。

const burgerParent = new THREE.Group();
burgerParent.add(yourBurgerModel);
yourBurgerModel.position.x = 123; // Some offset you define
yourBurgerModel.position.y = 123; // Some offset you define
yourBurgerModel.position.z = 123; // Some offset you define
scene.add(burgerParent);