Everything seems to load twice

I’m working on a project which makes use of GLTFLoader to load the assets (loading status per asset can be seen in the console) . After everything is loaded I also log render info in the console and then start my animate function. Now the problem is that everything in the console seems to load twice. Every message is presented twice, while it only should once. It might only be the console message that’s shown twice, but also that would be weird. I feel like everything actually loads twice.

Also if I check it on Safari, even weirder stuff is happening.

I’m not really sure how this happens, maybe it is related.

On my phone (iPhone 12) it actually doesn’t load at all. The page crashes after most assets are done loading (on any browser). Not sure if this is also related.

You can check it out here: Onderwijs in de regio

99.9% because you told it to. But hard to say without seeing how you structured the loading code.

Maybe you have draco loader

I’m loading GLTF assets as followed:

    new GLTFLoader().load('assets/regios_textures/Waterland.gltf', ( gltf ) => {
        gltf.scene.name = 'Waterland';
        gltf.scene.scale.set(size * 10, size * 10, size * 10 );
        gltf.scene.position.y = 0;
        
        gltf.scene.traverse(function(child) { if (child instanceof THREE.Mesh) {
            child.castShadow = true;
            child.receiveShadow = true;
            child.material.metalness = 0;//prevents everything from becoming dark
            //child.callback = clickwaterland;
        }});
        scene.add( gltf.scene );
        //objects.push(gltf.scene);
        }, function ( xhr ) {
            console.log( 'Waterland ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
            $('.loading-status').html( 'Waterland ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        }, function ( error ) {
            console.log( 'An error happened' );
    });

After everything is loaded the following loadingmanager function is fired:

    THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {
        if(loaded === total){
			
			animate();

			console.log("Scene polycount (triangles):", renderer.info.render.triangles);
			console.log("Active Drawcalls:", renderer.info.render.calls);   
			console.log("Scene points:", renderer.info.render.points);   
			console.log("Scene lines:", renderer.info.render.lines);
			console.log("Scene frame:", renderer.info.render.frame);   
			console.log("Textures in Memory", renderer.info.memory.textures);
			console.log("Geometries in Memory", renderer.info.memory.geometries);
			
			screenchange();

			$('.loading-status-wrap').hide();
			$('.startbutton').fadeIn();

            //$('.tourwrap').addClass('afterload');

        }
    };

I’m not an expert and might have missed something, but it doesn’t seem like there’s anything that should make it load twice.

I’m not using draco loader

Looking at the network panel - you are doing everything twice. Can you put a console log / debugger somewhere within the app initialisation code (not the loading itself) - and see if it logs twice?

The loading code looks ok, so it’s likely something outside that’s causing the trouble.

Yes I have put some console logs throughout the code and they al seem to log twice. I might have to check everything again, but the last few times I couldn’t find anything obvious. Is there anything else known that might cause this?

Thanks for your time.

you have an iframe in your html that loads the same page.

<iframe src="#" frameborder="0" modestbranding="0" controls="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

image

4 Likes

I feel pretty stupid now…

That’s something I would’ve never thought to look at. Thank you so much.

1 Like