Model loads correct in Firefx, not in Edge or Chromium

Questions
1

I have created a scene with 3 pointlights, 1 ambient light and loading 7 objects through FBXLoader.

While working on this, I have used Firefox for testing (108.0.1 & 110.0). A few times during setting up, it looked like the objects where rendered only shortly… Then reverted last changes, did a Ctrl + F5 and it worked again.

Now that I have a working (apparently) 3D simulation, I am testing with Edge (110.0.1587.50) and a embedded Chromium browser (107.1.90)

I noticed that I only see the first object blinking and then it’s gone again.

Messing around a bit more with the developer tools in those browsers, I can get things rendered correctly when I use throttling (10Mbit/s).

Part of the code here. (unfortunately I can’t disclose full sources and fbx files)

My educated guess, is that there is a async issue somehow between FF and the Chromium based browsers. But even though I try with loadAsync() and await, it seems not all fbx’s are loaded when the model is built (7 FBX’s are nested groups/pivot, to make them move as whole or partial group around certain points)

Any idea’s what I can check why it’s loading in FF and not in Edge/Chromium ?

var tr = new THREE.Object3D();
var bp = new THREE.Object3D();

var tr_pivot = new THREE.Object3D();
var bp_pivot = new THREE.Object3D();

fbxLoader.load(
    'models/obj1.fbx',
    (obj1) => {
        obj1.traverse(function (child) {
            if ((child as THREE.Mesh).isMesh) {
                (child as THREE.Mesh).material = material
                if ((child as THREE.Mesh).material) {
                    ((child as THREE.Mesh).material as THREE.MeshBasicMaterial).transparent = false
                }
            }
        })
		tr = obj1;
		
		tr.position.z = -100;		
        tr.scale.set(1.0, 1.0, 1.0);
		tr.rotation.setFromVector3(new THREE.Vector3( Math.PI/2, 0, 0));		

        scene.add(tr)
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log(error)
    }
)

fbxLoader.load(
    'models/obje2.fbx',
    (obj2) => {
        obj2.traverse(function (child) {
            if ((child as THREE.Mesh).isMesh) {
                (child as THREE.Mesh).material = material
                if ((child as THREE.Mesh).material) {
                    ((child as THREE.Mesh).material as THREE.MeshBasicMaterial).transparent = false
                }

				let objBoundingBox = new THREE.Box3().setFromObject( obj2 );
				objBoundingBox.getSize(objSize);
            }
        })
		bp = obj2;
		bp.scale.set(1.0,1.0,1.0);
		bp.position.x = -180
		bp.position.y = 53
		bp.rotation.setFromVector3(new THREE.Vector3( 0, 0, 0));

		tr.add(bp);
			
		bp_pivot = new THREE.Group();
		bp_pivot.position.set( 0, 0, 0 );
		bp.add( bp_pivot );
		bp_pivot.add( tr );

    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log(error)
    }
)
2

Your tr is different depending on which loader finishes first.

Try the answer in this thread

This might not be the compete answer to your problem, but it’s one problem that I can see from the code you supplied.

3

Thanks,

Did a quick try with the Promise.All from that article and I can see all fbx files loading now in Edge and the embedded chromium browser, and showing in the scene as well.