Threejs如何围绕对象自己的中心而不是世界中心旋转 [英] threejs how to rotate around object's own center,instead of world center

问题描述

场景中有两个物体.立方体旋转轴应该是立方体的中心，这是我的期望.

two objects in the scene. the cube rotate axis should be the cube's center,that's my expect.

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

but the shoe model's rotate axis is the world's y axis.

我的原始代码是.

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

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

I found a solution in stackoverflow,like this:

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

但它不起作用.然后，我改变鞋子的位置.

But it doesn't work. And then, I change the shoe's position.

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

结果现在更好了，但仍然不完美.而且由于鞋的型号很多，我无法确定每个鞋型号的不同位置.

The result is better now, but it still not perfect. And since there are a lot of shoe's model, I can't determine different position for every shoe model.

推荐答案

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

If your mesh is not rotating around its center, it is because the geometry vertices are offset from the origin.

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

You can automate repositioning by using a bounding box to define a reasonable center, and then offset the mesh's position like so:

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

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

Then add the mesh to a pivot object:

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

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

In your animation loop, rotate the pivot;

pivot.rotation.y += 0.01;

<小时>

另一种解决方案是平移几何顶点，使几何以原点为中心或靠近原点:

---

A different solution is to translate the geometry vertices so the geometry is centered around, or near, the origin:

geometry.translate( distX, distY, distZ );

或者，您可以直接调用:

Or, alternatively, you could just call:

geometry.center();

根据几何体的边界框为您居中几何体的顶点.

which centers the vertices of the geometry for you based on the geometry's bounding box.

three.js r.97

three.js r.97

这篇关于Threejs如何围绕对象自己的中心而不是世界中心旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！