Can You Create a Pivot Point in Three.js?

I have been using simple little cube meshes to act as pivot points for my models. I can attach other objects to these “pivot meshes” and can rotate and move the objects by rotating and moving the pivot meshes. However, I don’t really need the pivots to have a mesh.

Is there something in three.js that would serve the same purpose, but which doesn’t require a mesh - i.e. a “pivot point”?

Could Object3D not serve your purpose for this? Otherwise you could use geometry.translate(x, y, z) on the geometries in your meshes by a factor, and make rotations on the containing meshes from there?

3 Likes

My understanding is that Object3D carries a lot of overhead and commentators appear to recommend using it sparingly. I believe that mesh has less overhead and, so far, has done everything I wanted. I even use it as the parent in a Group.

Mesh is a child of Object3D, so it has everything that Object3D has + all additional mesh-related things.

5 Likes

As @PavelBoytchev has pointed out, Mesh extends Object3D, Group also extends Object3D, if your concern is overhead then your best bet is to translate the geometry of a mesh and make translations and rotations on the said mesh from there…

4 Likes

There might be some confusion here.

Using a Mesh as a pivot adds unnecessary overhead because it’s not just a transform—it includes geometry, material, and a draw call, which is relatively expensive due to GPU sync. In contrast, Object3D or Group are lightweight and ideal for pivot points since they’re just transforms.

If you’re adding a pivot and don’t want to modify the mesh in your DCC tool (like Blender), use Object3D or Group. But don’t add one for every object by default—only when necessary.

The most performant option is to model the pivot directly into the mesh—i.e., set the mesh origin to the desired pivot in Blender. For example, trees should have their origin at the base, since you’ll place many of them and every extra transform adds cost. (and they don’t move so after they have been placed, you can explicitly disable matrix updates on them to squeak even a little more performance out of them)

For things like rudders, a few extra transforms aren’t a big deal unless you’re simulating hundreds of planes—then minimizing node count becomes important (ideally one mesh per part).

5 Likes

I sometimes use THREE.AxesHelper as a pivot. Does this represent a big burden on the process?

If your rotation is simple, you can handle it manually using a virtual origin. But take my word for it, you’ll regret it the moment you’ll have to deal with nested objects. And don’t even get me started on gimbal lock and quaternions.

THREE.AxesHelper is just a Mesh made up of three lines (Also an Object3D, as mentioned above) that helps visualize axis orientation. So once again, using an Object3D is the most logical choice.

4 Likes

@Lawrence3DPK @PavelBoytchev @manthrax @Fennec

So I had it backwards? Object3D has less overhead than mesh (or line or points)?

And, in effect, Object3D is the pivot point that I have been looking for?

How do I credit 4 people with correctly answering my question?

Thanks!

5 Likes

Yes correct! (You can use @username to address specific people)

Thanks @PavelBoytchev @Lawrence3DPK @Fennec !

2 Likes

Add custom updateMatrixWorld function.

4 Likes

If I’m not mistaken, in the given example of a tree for instance, is it also the case that if the mesh is loaded into three with the origin at its center, you can also use the following to achieve the same result…

mesh.geometry.translate(0, -mesh.geometry.boundingBox.min.y, 0) 
2 Likes

In one case, I do use linked objects to handle the task of computing rotation - which eliminated the need for me to perform some increasingly complex Napier calculations.

That’s totally legit. There are some times you absolutely need extra nodes for rotations / degrees of freedom, etc. Which is all the more reason to optimize out the ones you don’t really need.

2 Likes