How can I rotate around the center of an object in three.js?

Question

I am dynamically adding a number of different objects of various sizes into a scene (one per click) and scaling and positioning them. Now I want to be able to rotate the objects around the Y axis at their center. I have added a boundingBox and an axesHelper, but the latter is showing up in the bottom corner of the objects. Reading this answer, which is similar to mine, it seems like this might be because of an offset. I can find the center of the object fine with this:

var box3 = new THREE.Box3();
var boundingBox = new THREE.BoxHelper( mesh, 0xffff00 );
scene.add( boundingBox );
box3.setFromObject( boundingBox );
center = box3.getCenter( boundingBox.position );
console.log( "center: ", center );

But when I try to reset the center to this position, following this answer, my object shoots way off into space.

box3.center(mesh.position);
mesh.position.multiplyScalar( -1 );

And I’m not really clear (even after reading the documentation) what “multiplyScalar” does/means. By playing with that number, I can get the object closer to the desired position, but the object still doesn't rotate around its center, and the AxesHelper is still at the original location.

Instead, try translating the vertices of your mesh's geometry: `mesh.geometry.center()`. — WestLangley, Sep 28 '18 at 22:22
I'd like to accept your solution, @WestLangley, if you'd like to move it to an answer. — westcoast_509, Oct 01 '18 at 00:19
Glad to have helped, but I previously posted my answer below. — WestLangley, Oct 01 '18 at 03:27

score 1 · Accepted Answer · answered Sep 30 '18 at 19:23

Your object is not rotating around its center. Likely, your object's geometry is offset from the origin.

If you are dealing with a single Mesh or Line, you can center the object's geometry by calling

geometry.center();

This method will translate the vertices of the geometry so the geometry's bounding box is centered at the origin.

three.js r.97

How can I rotate around the center of an object in three.js?

1 Answers1