Box around a skinned mesh

Questions
,
1

Following this trope I’ve managed to get a bounding box of a skinned mesh:

// simplified with boneTransform
var aabb = new THREE.Box3();
var skinned = new THREE.Vector3();
var geometry = skinnedMesh.geometry;
var position = geometry.attributes.position;
aabb.makeEmpty();
for (let i = 0; i < position.count; i ++ ) {
	skinnedMesh.boneTransform(i, skinned)
	aabb.expandByPoint( skinned );
}
aabb.applyMatrix4( skinnedMesh.matrixWorld );

(Seems to be working - fiddle).

I’m having trouble In a situation when I rotate the mesh. I get a proper bounding box:

image

But I want to get a (I’m not sure how to call it) box which doesn’t need to be aligned with the world axes. Like this:
image

I thought of calculating the bounding box of a mesh without any rotation applied, and then manually rotating the resulting ‘green box’ but I’m not sure at which point I need to “undo the rotation”.
I’ve tried:

  • applying a rotated matrix to the calculated points from boneTransform before expanding the box.
  • applying a rotated matrix to the final Box3 instead of just matrixWorld.
  • applying the rotation to the bindMatrix and bindMatrixInverse of the skinned mesh.
  • applying a rotated matrix to a clone of the skinnedMesh and using the clone instead

I’ve tried hacking into boneTransform and doing some Trial and error but I keep hitting a wall. If you want I can make more fiddles with those “trials”.

The “proper” sceenshot is from this hacky fiddle, where I load two meshes and use one for calculations.

Any tip will help a lot,
Thanks in advance!

2

It’s not possible to achieve this result with Box3. This class represents an AABB which is always axis-aligned. You are looking for a so called oriented bounding box (OBB).

Fortunately, there is a basic OBB implementation in three.js, see: https://threejs.org/examples/webgl_math_obb

I suggest you generate an AABB first and then setup the OBB via fromBox3(). When the skinned mesh transforms, you can apply its world matrix to the OBB like demonstrated in the example.

2 Likes
3

Thank you for Your reply :slight_smile:

It gets tricky when animations are in play, but most certainly this approach results in what I want to achieve. Thank You very much for Your time :slight_smile: