Understanding loaded OBJ group position

I have a simple Three.js scene that loads an OBJ file and renders it. I then create a BoxGeometry, copy the OBJ object’s position, and render the box, but the box’s position differs from that of the OBJ file:

In particular, the OBJ object seems to be out of position somehow, as if the parent group were translated. Does anyone know what’s causing the object to be positioned as it is, or how I can center it so it’s position in fact corresponds with that of the Box? Any help others can offer on this question would be greatly appreciated!

You’re missing a key point. When doing cube.position.set(car.position.x, car.position.y, car.position.z);, you’re setting the cube position to 0, 0, 0 because the car mesh has no translation applied to it. It’s the vertices themselves that give its position.

You can assign the true center of the car to the red box with

var box = new THREE.Box3().setFromObject(car);
cube.position.copy(box.getCenter());

3 Likes

Thanks very much @marquizzo–this is perfect!

Just to make sure I grok this–if I were to edit this car in Blender so as to center the car at 0,0,0, then both its position and center would be at 0,0,0, but right now the car’s position is at 0,0,0 while the car’s center is at box.getCenter()–is that right?

Thank you again for this–I need to go recenter all of my objects!

Yeah, centering the geometry is important. See the two images below. Both meshes are technically positioned at (0, 0, 0), but the vertices have been moved so the origin is in the middle of the geometry, not outside of it:

Origin outside geometry, verts in x-axis range from [-196 to -47].


Origin at center of geometry, verts in x-axis range from [-74 to +74]:

This is especially important if you’re going to apply rotations, the pivot point of the rotations will be off-centered and may give you unexpected results. Same goes for scaling.

2 Likes

Amen! I’m absolutely awful with blender without the three button mouse in my office. If I can ask one more question, is there a fast way to perform the centering in three.js?

I’ve been adding the object to a THREE.Group(), then positioning the group and removing the child object’s translation offsets. This works fine, but involves the creation of unnecessary Group objects… If there’s a better way I’d certainly like to use it!

It strikes me now that I could use another tool, like the pywavefront library in Python, to center OBJ files before loading them…

Blender without a three-button mouse is torture. Why don’t you buy one online? They can be super cheap.

To do a default center, just right-click on the object, then Set Origin > Geometry to Origin

If you need to do a more nuanced center manually:

  • Hit Tab to enter Edit mode
  • A to select all vertices
  • G to move them, or use the move tool
1 Like

It doesn’t get much simpler than that! Thanks again for your follow up @marquizzo!