# Accurate GLTF bounding box

**URL:** <https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410>\
**Category:** Questions\
**Tags:** gltf, geometry\
**Created:** [December 2, 2022, 6:00pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410 "2022-12-02T18:00:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![callum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/callum/32/2446_2.png) [@callum](https://discourse.threejs.org/u/callum)\
**Post date:** [December 2, 2022, 6:00pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/1 "2022-12-02T18:00:16Z")

</div>

I am trying to calculate the bounding box of a GLTF model I load but the simple approach:

```
const bbox = new THREE.BoxHelper( gltf.scene, 0xffff00 );

```

is inaccurate for this model - works for the models included in the Three.js distribution:

 ![fails](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/2/524b9d7ee09f604451037a98928d95b81f25c8aa.png) ![works](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/0/f04b60fc0a6c2c11bf2ea645edf3ce0e9e6e0aba.png)

That suggested to me that the model is authored incorrectly and would need to be redone but if I load it into a 3rd party GLTF Viewer that supports display of a bounding box, it appears to be correct so I think that means there is a way to update the bounds.

 ![pc](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/2/123d462f8c83cbcc8d657be6c51ce42d2376108d.png)

I’ve tried lots of ways (from posts here) to fix this without success - can anyone point me at the right solution?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 2, 2022, 7:54pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/2 "2022-12-02T19:54:22Z")

</div>

The usual cause here is that a skinnedmesh’s bounds are derived from the influence of its skeleton on the vertices. THREE.BoxHelper does not compute all of that, just the size of the base geometry before any skinning deformation.

The [`SkinnedMesh.boneTransform`](https://threejs.org/docs/?q=skinnedmesh#api/en/objects/SkinnedMesh.boneTransform) method could be compute updated vertex positions with skinning included, do that for every vertex and you’ll get the accurate bounding box. This would be fairly expensive to do on every frame, though.

---

<div class="post-metadata">

**Author:** ![callum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/callum/32/2446_2.png) [@callum](https://discourse.threejs.org/u/callum)\
**Post date:** [December 2, 2022, 8:11pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/3 "2022-12-02T20:11:26Z")

</div>

Understood and thank you. I only have to do this once - the ultimate goal once I have an accurate bounding box is to fit the model to the viewport and save off the result as a PNG. This is the last piece of the puzzle I have to solve.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 3, 2022, 1:42pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/4 "2022-12-03T13:42:03Z")

</div>

could you go into more detail with this one? i have the same problem, this is for instance the reason for why on pmndrs market some models have the shadow piercing the model, like this one [pmndrs market -](https://market.pmnd.rs/model/unicorn) this happens when they’re skinned. how can we use boneTransform in combination with box3? i would also need it just once.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 19, 2022, 4:59pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/5 "2022-12-19T16:59:28Z")

</div>

Here’s code for accurately fitting a THREE.Box3 to a THREE.SkinnedMesh —

```javascript
const vector = new THREE.Vector3();
const box = new THREE.Box3().makeEmpty();
const position = mesh.geometry.attributes.position;

for ( let i = 0, il = position.count; i < il; i ++ ) {

	vector.fromBufferAttribute( position, i );
	mesh.boneTransform( i, vector );
	mesh.localToWorld( vector );
	box.expandByPoint( vector );

}

```

The code above computes the bounding box in world space; omit `localToWorld` if you prefer local space.

Preview:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c3c388de8348bdaae8fadf61f2607a0a6cbae9e6.webm](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c3c388de8348bdaae8fadf61f2607a0a6cbae9e6.webm)

_NOTE: Only some portions of this character are skinned. I included only the skinned portions in this capture, which is why the legs do not display a bbox, but that’s an unusual situation._

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 19, 2022, 10:03pm UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/6 "2022-12-19T22:03:33Z")

</div>

incredible, thank you! i will try to add this to drei/stage.

btw what is this game or website in your preview? it is beautiful …

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 20, 2022, 4:54am UTC](https://discourse.threejs.org/t/accurate-gltf-bounding-box/45410/7 "2022-12-20T04:54:39Z")

</div>

[New IK example](https://threejs.org/examples/#webgl_animation_skinning_ik) 🙂