Var undefined when I use a loader in three.js

Question

//Script loader
<script src="js/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js" type="text/javascript"></script>


<script>
var loader = new THREE.ColladaLoader();
loader.load( 'texture/bigcube_hetre.dae', function ( collada ) {

    window.cubeBigHetre = collada.scene;

    var skin = collada.skins[ 0 ];

    cubeBigHetre.position.set(0, 0, 0);
    cubeBigHetre.scale.set(1, 1, 1);

});


var container;
var camera, scene, renderer;
var plane, cube;
var cubeExport;

init();
render();

function init() {

    container = document.createElement( 'div' );
    container.setAttribute("id", "container");

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 2000 );
    camera.lookAt( new THREE.Vector3() );

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.damping = 0.2;
    controls.addEventListener( 'change', render );

    scene = new THREE.Scene();

    // grid

    var size = 500, step = 50;

    var geometry = new THREE.Geometry();

    for ( var i = - size; i <= size; i += step ) {

        geometry.vertices.push( new THREE.Vector3( - size, i, 0 ) );
        geometry.vertices.push( new THREE.Vector3(   size, i, 0 ) );

        geometry.vertices.push( new THREE.Vector3( i, - size, 0 ) );
        geometry.vertices.push( new THREE.Vector3( i, size,  0  ) );

    }

    var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2, transparent: true } );

    var line = new THREE.Line( geometry, material, THREE.LinePieces );
    scene.add( line );

    //

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );


    plane = new THREE.Mesh( geometry );
    plane.visible = false;
    scene.add( plane );



    // Lights

    var ambientLight = new THREE.AmbientLight( 0x606060 );
    scene.add( ambientLight );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
    scene.add( directionalLight );

    alert(cubeBigHetre);//Uncaught ReferenceError: cubeBigBrun is not defined

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function render() {

    renderer.render( scene, camera );
}
</script>

Here is the code, and the problem comes from alert(cubeBigHetre); It's working in Firefox and Internet Explorer but not with others. The error is : Uncaught ReferenceError: cubeBigBrun is not defined but not in firefox ! Cordialy Alexander

Answer 1

There is a race in your code:

loader.load(..., function)

will call the function when the resource becomes available. So when you call your init() function, the resource may be loaded, the loader callback called and your variable initialized, or the resource may be still downloading, the callback not yet called and your variable still not initialized. This code works by chance in IE and Firefox. Probably you are testing locally and/or experiencing minor differences in Javascript engines across the browsers.

You should move code that depends on the resource to be loaded from the init() function to the loader callback.

Answer 2

Thank you, I think you are true but i can't move it in the loader so I should add a setTimeout().