Search code examples
three.jsglobal-variablestypeerrorobjloader

How can I load a group of objects to a global variable with OBJLoader without type-error messages?


I'm using the following code to load OBJ objects, but in order to load the resulted group on a global variable, I pre-define the variable as 'null' which raises Type-error messages in Firefox console. I tried defining it as THREE.Group, THREE.Mesh, etc to no avail -those are causing the code to not execute. How can I have the same functionality without those annoying error messages?

Firefox developer tools

//this is causing Type-error messages in FF dev tools
var femModel = null;

var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete,2)+ '% downloaded');//<<<<
    }
    if (percentComplete = 100){
        waitmodeltoload();//<<<<<<
    }
};

var onError = function ( xhr ) { }; 

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'female02/' );


mtlLoader.setMaterialOptions({ side:THREE.DoubleSide });

// the code in question:
mtlLoader.load( 'female02.mtl', function( materials ) {

        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        objLoader.setPath( 'female02/' );
        objLoader.load( 'female02.obj', function ( object ) {

        femModel = object;

        }, onProgress, onError );
});

var waitid;
function waitmodeltoload(){
    if (!femModel){
        clearTimeout(waitid);
        waitid = setTimeout(setupmodel, 100);
    }
    setupmodel();//<<<<<
}

function setupmodel(){
    var intersects=null;
    femModel.traverse( function ( child ) {   // <<<<<<<<
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true;
            child.receiveShadow = true; 
        }           
    } );    
    femModel.position.set( 0, -90, 0 );
    sceneR2S.add( femModel );

}

Solution

  • OK, that was simpler than I thought, it was a logical error of mine, I overlooked that the code was trying to access femModel before it was available:

    So instead of:

    var waitid;
    function waitmodeltoload(){
        if (!femModel){
            clearTimeout(waitid);
            waitid = setTimeout(setupmodel, 100);
        }
        setupmodel();
    }
    

    It should be:

    var waitid;
    function waitmodeltoload(){
        if (!femModel){
            clearTimeout(waitid);
            waitid = setTimeout(setupmodel, 100);
        }else{
            setupmodel();
        }
    }
    

    In the first case setupmodel() was called even if the model wasn't loaded. An "else" was all that was needed -no more red-alert Type-error messages.