What is the "center" of a Three.js object?

three.js centering bounding-box
Kolban picture Kolban · Jun 25, 2016 · Viewed 10.7k times · Source

When I use Blender to model an object, I am able to explicitly define its center position from which translations and rotations occur. When working with Three.js objects, I don't seem to find an equivalent.

Does a Three.js object have a property that defines its "center" position? If not, how is the the center of the object determined?

Answer

WestLangley picture WestLangley · Jun 25, 2016

In three.js, an object's "center" is the origin in the object's local coordinate system.

If your object is not rotating around the point you want, then you need to translate the vertices of your geometry so the desired center is at the origin.

geometry.translate( distX, distY, distZ );

See this answer for more information and an alternate solution.

three.js r.78

Related questions

"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More
Changing three.js background to transparent or other color

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck. My HTML: <canvas id="canvasColor"> My CSS: <style type="text/…

Read More
Rotate camera in Three.js with mouse

I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, …

Read More