Bounding box is calculated wrong?

When I load a mesh into three.js and compute it’s bounding box, the max and min seem to be wrong. Here is a minimal code example:

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<script src="three.js"></script>
		<script src="inflate.min.js"></script>
		<script src="FBXLoader.js"></script>
		<script>
			var loader = new THREE.FBXLoader();
			loader.load("box.fbx", function(group) {
				var helper = new THREE.BoxHelper(group.children[0]);
				helper.geometry.computeBoundingBox();
				console.log(helper.geometry.boundingBox);

				group.children[0].geometry.computeBoundingBox();
				console.log(group.children[0].geometry.boundingBox);
			});
		</script>
	</body>
</html>

The output is:
cap

Why would the two outputs be different? The first output is the correct one and I’m not sure how the second one was calculated but it’s not the proper bounds of the object.

I’m using the latest dev version of three.js because the regular version has issues with the FBX loader.

What’s going on here? Thanks.

Can you please provide a live example with your code?

JSFiddle doesn’t allow me to upload files which is necessary for the FBXLoader, box.fbx and even the dev version of three.js I think. But I can give you a download link for the project:

http://www.mediafire.com/file/49314cduz4d25il/boundingBox.zip

Also, if you compute the bounds using new THREE.Box3().setFromObject() it seems to work.

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<script src="three.js"></script>
		<script src="inflate.min.js"></script>
		<script src="FBXLoader.js"></script>
		<script>
			var loader = new THREE.FBXLoader();
			loader.load("box.fbx", function(group) {
				var helper = new THREE.BoxHelper(group.children[0]);
				helper.geometry.computeBoundingBox();
				console.log(helper.geometry.boundingBox);

				group.children[0].geometry.computeBoundingBox();
				console.log(group.children[0].geometry.boundingBox);

				console.log(new THREE.Box3().setFromObject(group.children[0]));
			});
		</script>
	</body>
</html>

Output:
cap

The first and third are correct, second bounding box is still wrong.

It’s important to understand that geometry.boundingBox does not respect the transformation of the corresponding mesh. So if you do the following, you should get correct results:

var boundingBox = new THREE.Box3();
var mesh = group.children[0];
boundingBox.copy( mesh.geometry.boundingBox );
mesh.updateMatrixWorld( true ); // ensure world matrix is up to date
boundingBox.applyMatrix4( mesh.matrixWorld );
console.log( boundingBox );

Be aware that geometries can be shared across meshes. So the behavior of the library is actually correct.

7 Likes

Okay I see, thanks so much for the help!

@Mugen87 man you have no idea how hard I was ramming my head against the wall trying to get updated positions of meshes until I read this comment. Thank you so much.

1 Like