rotation - 三个js如何绕对象自己的中心而不是世界中心旋转

场景中的两个对象。
我的期望是立方体旋转轴应该是立方体的中心。

但是鞋子模型的旋转轴是世界的y轴。

我的原始代码是。

cube.rotation.y += 0.01;
shoe.rotation.y += 0.01;

我在stackoverflow中找到了一个解决方案，如下所示:

cube.rotation.y += 0.01;
var pivot = new THREE.Object3D();
pivot.add(shoe);
pivot.rotation.y += 0.01;

但这是行不通的。
然后，我改变鞋子的位置。

cube.rotation.y += 0.01;
var pivot = new THREE.Object3D();
shoe.position.set(-5,0,0);
pivot.add(shoe);
pivot.rotation.y += 0.01;

现在的结果更好，但是仍然不完美。而且由于鞋子的型号很多，所以我无法为每种鞋子型号确定不同的位置。

最佳答案

如果您的网格没有绕其中心旋转，那是因为几何顶点偏离了原点。

您可以通过使用边界框来定义合理的中心，然后像这样偏移网格的位置来自动进行重新定位:

var box = new THREE.Box3().setFromObject( mesh );
box.center( mesh.position ); // this re-sets the mesh position
mesh.position.multiplyScalar( - 1 );

然后将网格添加到枢轴对象:

var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );

在动画循环中，旋转枢轴；

pivot.rotation.y += 0.01;

编辑:A different solution将平移几何顶点，以便几何以原点为中心或附近:

geometry.translate( distX, distY, distZ );

或者，您也可以致电:

geometry.center();

会根据几何图形的边界框将几何图形的顶点居中。

three.js r.97