Mesh is not visible. Geometry's boundingbox is NaN

Hey guys!

I got a weird error since I updated from r137 to r156 (Tried r158 too).
Im loading multiple objects with the GLTFLoader and position them in the scene.
Sometimes when refreshing and reentering the page, all models arent visible anymore. I checked transformation and visibility etc of all objects, it is in the scene, its position is 0,0,0 and it should be visible.
The only thing I could find out is, when outputting the freshly calculated boundingbox of all objects, on a mouse click event, the bounding boxes would be { x: NaN, y: NaN, z: NaN } (same with center), but when checking the Geometry’s, the vertices seemed to be fine!

I then calculated the boundingbox at various situations. For example right after the GLTF is loaded and cloned. At that point everything seems fine, the size is correct.

In the same onLoad callback from the GLTFLoader, the model clone is added to a object3D, which is used as container. After adding it to the container, all boundingboxes are NaN!

At this point, im kinda confused.

This is a simplified version of my function

    public create2(parts: TransferObject[]) : THREE.Object3D {

        let container: THREE.Object3D = new THREE.Object3D()

        let obj: THREE.Object3D

        parts.forEach((part, index)=> {

            // if model to load
            if (part.model == true) {
                if (part.modelObjPath != null) {
                    // Load model
                    LoadingManager.loadGLTF(Globals.path(part.modelObjPath), (gltf: GLTF)=> {

                        console.log('LOAD glft', part.modelObjPath)
                        obj = gltf.scene.clone(true)

                        this.setModel(obj, part)

                        // Calculating boundingbox first time
                        let box = new THREE.Box3().setFromObject(obj, true)
                        let v = new THREE.Vector3()
                        let c = new THREE.Vector3()
                        console.log('bbox create',v, c)

                        // After adding it, the boundingbox is NaN

                        // Calculating boundingbox second time
                        box = new THREE.Box3().setFromObject(obj, true)
                        v = new THREE.Vector3()
                        c = new THREE.Vector3()
                        console.log('bbox create2',v, c)
        }) // For loop - parts ende

        container.matrixAutoUpdate = false

        return container

The LoadingManager class takes care of loading gltf models and storing them in a map, The original gltf is stored and returned, then cloned when used.

Any help is appreciated!

If you are going to compute a bounding box before the object has ever been rendered, you most likely will need to call some or all of .updateMatrix , .updateMatrixWorld, on the object, or .updateMatrixWorld(true) on the glb.scene root.

Bounding box computation needs to have valid worldMatrix’s , and worldMatrix is normally only computed during the renderer.render phase.

That all said… the behavior you see shouldn’t really be random… it should be consistently broken, or consistently working…

Very possible that there is a bug somewhere since, as you’ve noted, the behavior seems different between different versions of THREE.

so it would be super useful if you could reproduce the issue with a codepen/jsfiddle/glitch with a glb/gltf that shows the behavior!

It’s also possible that somehow the GLTF has a gotten a NaN somewhere in the vertex data. This will cause bounding box computation to fail, so when you get the error, I suggest logging the following…

mesh.geometry.boundingBox (if it exists)

Look for NaNs in that data or matrices that contain all zeroes…


Found it! At some point the objects rotation xyzw are set to undefined… small but effective mistake hehe.

Thanks for the explanation and taking the time!

1 Like

Turns out there was a minor change in r151 in the quaternion class. Quaternions are now serialized to an array instead of an object!