如何在three.js中围绕对象的中心旋转？

Posted 2023-02-27

【中文标题】如何在three.js中围绕对象的中心旋转？

【英文标题】：How can I rotate around the center of an object in three.js?

【发布时间】：2019-03-04 21:30:35

【问题描述】：

我正在将许多不同大小的不同对象动态添加到场景中（每次单击一个）并缩放和定位它们。现在我希望能够在其中心围绕 Y 轴旋转对象。我添加了一个boundingBox 和一个axesHelper，但后者显示在对象的底角。阅读与我的相似的this answer，似乎这可能是因为偏移量。我可以用这个找到物体的中心：

var box3 = new THREE.Box3();
var boundingBox = new THREE.BoxHelper( mesh, 0xffff00 );
scene.add( boundingBox );
box3.setFromObject( boundingBox );
center = box3.getCenter( boundingBox.position );
console.log( "center: ", center );

但是当我尝试将中心重置到这个位置时，跟随这个answer，我的对象会射向太空。

box3.center(mesh.position);
mesh.position.multiplyScalar( -1 );

而且我不是很清楚（即使在阅读了文档之后）“multiplyScalar”是什么/意味着什么。通过使用该数字，我可以使对象更接近所需位置，但对象仍不会围绕其中心旋转，并且 AxesHelper 仍位于原始位置。

【问题讨论】：

尝试平移网格几何体的顶点：mesh.geometry.center()。

哎呀！当然！非常感谢！

我愿意接受您的解决方案，@WestLangley，如果您想将其移至答案。

很高兴有帮助，但我之前在下面发布了我的答案。

【参考方案1】：

您的对象未围绕其中心旋转。很可能，您的对象的几何形状偏离原点。

如果您正在处理单个网格或线，您可以通过调用来居中对象的几何图形

geometry.center();

此方法将平移几何体的顶点，使几何体的边界框以原点为中心。

three.js r.97