threejs how to rotate around object's own center,instead of world center

Question

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

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

my original code is.

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

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.

Answer 1

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; 

---

EDIT: 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