donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.06k stars 530 forks source link

Regression in bounding box calculation for skinned meshes #330

Closed mattrossman closed 1 year ago

mattrossman commented 1 year ago

Three.js r151 introduced bounding volumes for SkinnedMesh, see https://github.com/mrdoob/three.js/pull/25612. This causes unexpected behavior with Box3.setFromObject()

Take for example this model: bobby.glb.zip

r150 r151
image image

GLTFLoader doesn't update bone world matrices after a model loads (see https://github.com/mrdoob/three.js/issues/24772) which means the SkinnedMesh.computeBoundingBox() call within Box3.expandByObject() can result in an incorrect bounding box.

A workaround is to call .updateMatrixWorld() on the object before calculating the bounding box.

https://github.com/donmccurdy/three-gltf-viewer/blob/83114d40078975a0709b85a0a1f3a266f2514941/src/viewer.js#L251-L257

+object.updateMatrixWorld()

 const box = new Box3().setFromObject(object);
 const size = box.getSize(new Vector3()).length();
 const center = box.getCenter(new Vector3());