Three.js translate mesh geometries of a loaded glb model to have same center with it's bounding box

Question

Three.js: a loaded glb model has center different with it's bounding box center. How can I translate all it's mesh geometries to have same center with its bounding box?

For clearance: when I set position of bounding box = position of model. The bounding box will not cover the model anymore (picture below).

Because I will use bounding box for creating canon rigid body, so that position of model will be updated by rigid body. So I need to translate mesh position in model to have center = bounding box center.

In the picture: 3 models, 3 bounding boxes and 3 boxHelper(red).

@Mugen87 I uploaded a runable project for reference here: drive.google.com/open?id=1kPvxMgAmmrST2XJvDHvO6DUnjLPVqTf1 . You can find the model name model.glb inside models folder. — kiennt
– kiennt, Commented Aug 22, 2019 at 14:13

Mugen87 · Accepted Answer · 2019-08-23 09:12:02Z

2

The bounding box is computed correctly. The problem is that your blockBounding mesh is not positioned at the right place.

You have to position blockBounding at the center point of the bounding box (not at the model's position). Besides, it is also not necessary to apply a rotation to blockBounding. An instance of Box3 is an axis-aligned bounding box (AABB). So it's totally sufficient to do this:

blockBounding.position.copy( center ); // "center" is the center point of the model's AABB

The result looks like so:

three.js R107

answered Aug 23, 2019 at 9:12

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js translate mesh geometries of a loaded glb model to have same center with it's bounding box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related