JSONLoader(), callback called before uv texture image is loaded

[ssatguru]

I have an object (exported from Blender) which is uv mapped and has a uv texture image.
If I use JSONLoader() to load it , the callback function is called before the image is loaded.
If I immediately try to render it in the callback, it fails.
If I wait few seconds and render it, it works.
This fails

var loader = new THREE.JSONLoader(true);
loader.load('Carl.js',
            function ( geometry, materials ) {
                var material = new THREE.MeshFaceMaterial( materials );
                mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
                renderer.render(scene, camera);
            }
);

This works

var loader = new THREE.JSONLoader(true);
loader.load('Carl.js',
            function ( geometry, materials ) {
                var material = new THREE.MeshFaceMaterial( materials );
                mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
                setTimeout(
                    function(){
                        renderer.render(scene, camera);
                    },
                    2000
                );
            }
);

I took a quick look at the source

JSONLoader calls 
    Loader.initMaterials() which calls
        Loader.createMaterial() which calls
            load_image()

load_image loads image asynchronously.
Looks like JSONLoader doesn't wait on this and calls callback function immediately.

[WestLangley]

@mrdoob What is the current best solution to this problem?

[mrdoob]

I'm thinking maybe JSONLoader should use LoadingManager internally and only execute the callback once the manager is done... ?

[dubejf]

There is no test case attached, I tried it with the files linked in #5438 (one json file with an external png texture) and couldn't see anything wrong. Presumed fixed by #5758.

[pastinepolenta]

I think is not fixed. I'am loading an obj with 5 materials and a couple of textures.
If I don't use the requestAnimationFrame (cause there are no animations) I just want to manually call the render when the textures are ready.

Doing that in the JSON loader callback result in an object without textures.

loader.load( "mydata.json", function (geometry, materials) {
        var material = new THREE.MultiMaterial(materials);
        Configurator.mountain = new THREE.Mesh(geometry, material);
        Configurator.mountain.position.set(0, -1.3, 0);
        Configurator.mountain.overdraw = false;
        Configurator.mountain.doubleSided = false;
        Configurator.mountain.castShadow = true;
        Configurator.mountain.receiveShadow = true;

        Configurator.group = new THREE.Object3D();
        Configurator.group.add(Configurator.object);
        Configurator.group.add(Configurator.mountain);

        // correct the barycenter of the group
        // we need to move each group's geometries
        var centroidCorrection = new THREE.Matrix4().makeTranslation( 0, 0, 0);
        Configurator.mountain.geometry.applyMatrix(centroidCorrection);
        Configurator.mountain.geometry.verticesNeedUpdate = true;
        Configurator.object.geometry.applyMatrix(centroidCorrection);
        Configurator.object.geometry.verticesNeedUpdate = true;

        Configurator.scene.add(Configurator.group);

        Configurator.controls.update();
        Configurator.animate();
    });

[pastinepolenta]

@mrdoob any workaround? How can LoadingManager help on this ? Shall I provide a fiddle ? I can reproduce the issue with a 40kb texture on a 3G network

@mrdoob having the same issue here, I'm seeing loadingManager firing onload event while texture is still on load. It only happens on mobile though

https://www.youtube.com/watch?v=wkDd-x0EkFU