三个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.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

Answer 2

使用THREE.Geometry.prototype.center，如下所示：

myGeometry.center();

这就像使用带有自动居中（x，y，z）的myGeometery.translate（x，y，z）。

Answer 3

枢轴解决方案对我不起作用。

使用OBJLoader.js（用于加载.obj对象），您需要获取对象的boundingBox，获取其中心，将标量乘以-1，并使用它来转换每个子几何的几何。然后，如果要将boundingBox用于某个目的，则需要重新更新boundingBox。

这是一个函数，它加载一个obj并“规范化”它的几何顶点，给定OBJ和MTL（纹理）文件的目录和名称（例如，如果OBJ和MTL文件是dir1 / myObject.obj和dir1 / myObject.mtl，然后调用loadObj（'dir1'，'myObject'））。

To reset your password, complete this form: {{ URL::to(\'user/reset\', array($token)) }}.

Answer 4

下面是我如何让事情在r86上工作

// Store original position
let box = new THREE.Box3().setFromObject(this.mesh);
let offset = box.getCenter();

// Center geometry faces
this.geometry.center();

// Add to pivot group
this.group = new THREE.Object3D();
this.group.add(this.mesh);

// Offset pivot group by original position
this.group.position.set(offset.x, offset.y, offset.z);

Answer 5

如果存在多个网格（最常见），请设置场景图中父节点的位置，以达到使模型居中的目的。如果场景图是这样的gltfObject-> childObject-> ..->网格数组

const bbox = new THREE.Box3().setFromObject( gltfObject );
const offset = new THREE.Vector3();
bbox.getCenter(offset).negate();
childObject.position.set(offset.x, offset.y, offset.z);