Translate axes of Object3D

I want to traslate the position of axes of a object3D to his own center.

I can get the box of object3D

var box = new THREE.Box3().setFromObject(object3D);

Get the position of axes

var objectCenter = new THREE.Vector3();
objectCenter.x = box.min.x + box.max.x;
objectCenter.y = box.min.y + box.max.y;
objectCenter.z = box.min.z + box.max.z;

And I try to translate his center to fix this
object3D.translateAxes.set(objectCenter);???

How could I do that? Please.

why not

var objectCenter = new THREE.Vector3();
box.getCenter(objectCenter);

?

see, you need to 0.5 * (box.min.x + box.max.x), but you do not need to think about it when calling getCenter

oh yes,

object3D.translateAxes.set(objectCenter);

perhaps you mean

object3D.position.sub(objectCenter);

I see that It moves the object but, do not move the internal axes of the object

The axis position is based on the geometry location relative to its original position on export from the program used to generate the model, you’ll need to center your actual geometry to achieve the result you’re after.

1 Like

Yes. Its somthing easy in a editor 3D, threfore i think that must be a way to do it with threeJs. It could helps a lot

Yes by using the same calculation above only applied to the object geometry instead, you can do as @makc3d suggested with…

var objectCenter = new THREE.Vector3();
box.getCenter(objectCenter);

Object3D.geometry.translate(-objectCenter.x, -objectCenter.y, -objectCenter.z)

Or you can simply call Object3D.geometry.center()

Object3D have not geometry inside. The geometry is inside the internal mesh that it contains. If I try to aplly it solution with traverse mesh objects, the Object3D changes and it become unseless

Can you provide a minimal live demo on codepen or jsfiddle with your setup?

flagGJN.glb (222.5 KB)

I can upload a object. If you try to set the transformcontrols at this object3D, you will see the axes out of the center.Like this!
image

I do not know how upload the object3D to codepen correctly…

your exported model is 100x too big. The flag mesh is a heavily nested object inside 5 “null” objects that are all at 0,0,0
image
this is a bit unnessicary but in this case you can translate any of the root.children.position.y by -boxSize / 2 and then move your root up by boxSize / 2 although this leaves your root node not at 0,0,0 like so…

i’ve editied this model by deleting all of the unnessicary “null” parent objects so it won’t be the same as your setup, i’d recomend to sort out your scene graph as to not have this many nested objects before your mesh and then move your object to the centered 0,0,0 position in blender and apply all transforms before exporting… moving things around would be much easier in this case and allow you to center the actual geometry to the parent object in three. having a good layout and understanding of the scene graph before exporting is quite essential to making transformations and translations later on in code…

1 Like

It is a good way to find the solution, thanks!