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

Question

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

但是鞋子模型的旋转轴是世界的 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;

现在的结果已经好多了，但仍然不完美。而且由于鞋款有很多，我无法为每种鞋款确定不同的位置。

Answer 1

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

您可以通过使用边界框定义合理的中心来自动重新定位，然后偏移网格的位置，如下所示:

var box = new THREE.Box3().setFromObject( mesh );
box.getCenter( 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();

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

三.js r153