Three.js issue creating meshes outside of loader's load() function
<p>I had difficulty exporting more than one texture using Blender's Three.js add-on, so had planned to work around it be separating the parts into separate meshes, but then came across the unexpected problem of the code not working when I created the meshes outside of the load() function. I've supplied an example below using a single model with a single mesh. The following works fine:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;working&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
        &lt;style&gt;
            body {
                font-family: Monospace;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;script src="js/build/three.min.js"&gt;&lt;/script&gt;

        &lt;script src="js/loaders/ColladaLoader.js"&gt;&lt;/script&gt;

        &lt;script src="js/Detector.js"&gt;&lt;/script&gt;

        &lt;script&gt;

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container;

            var camera, scene, renderer, objects;

            var scaleAdj = 100;
            init();
            animate();

            function init() 
            {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
                camera.position.set( 0, 500, 0 );

                scene = new THREE.Scene();
                scene.fog = new THREE.Fog( 0xcce0ff, 10, 10000 );

                var loader = new THREE.JSONLoader();

                loader.load( 'cube.json', function ( geometry, materials ) 
                {

                    var faceMaterial = new THREE.MultiMaterial( materials );

                    for ( var i = 0; i &lt; 250; i ++ ) 
                    {

                        var x = ( ( i % 27 )  - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);
                        var z = ( Math.floor( i / 27 ) - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);

                        mesh = new THREE.Mesh( geometry, faceMaterial );

                        var s = THREE.Math.randFloat( 0.5, 2 ) * scaleAdj;
                        mesh.scale.set( s, s, s );

                        mesh.position.set( x, scaleAdj, z );
                        mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );

                        mesh.matrixAutoUpdate = false;
                        mesh.updateMatrix();

                        scene.add( mesh );

                    }

                } );

                scene.add( new THREE.AmbientLight( 0xffffff ) );

                // ground
                var textureLoader = new THREE.TextureLoader();
                var groundTexture = textureLoader.load( "texture.jpg" );
                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
                groundTexture.repeat.set( 40, 40 );
                groundTexture.anisotropy = 16;

                var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
                mesh.position.y = 0;
                mesh.rotation.x = - Math.PI / 2;
                mesh.receiveShadow = true;
                scene.add( mesh );

                // Renderer

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.setClearColor( scene.fog.color );

                container.appendChild( renderer.domElement );

                // Events

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

            }


            function onWindowResize( event ) {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }



        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>But this doesn't (I've annotated which sections contain the differences):</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;not working&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
        &lt;style&gt;
            body {
                font-family: Monospace;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;script src="js/build/three.min.js"&gt;&lt;/script&gt;

        &lt;script src="js/loaders/ColladaLoader.js"&gt;&lt;/script&gt;

        &lt;script src="js/Detector.js"&gt;&lt;/script&gt;

        &lt;script&gt;

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            //--------------- difference number 1
            var obj_geometry;
            var obj_material;
            //-----------------------------------

            var container;

            var camera, scene, renderer, objects;

            var scaleAdj = 100;
            init();
            animate();

            function init() 
            {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
                camera.position.set( 0, 500, 0 );

                scene = new THREE.Scene();
                scene.fog = new THREE.Fog( 0xcce0ff, 10, 10000 );


                //-------------------difference number 2--------------------
                var loader = new THREE.JSONLoader();

                loader.load( 'cube.json', function ( geometry, material ) 
                {
                    obj_geometry = geometry;
                    obj_material = material;
                });

                var faceMaterial = new THREE.MultiMaterial( obj_material);

                for ( var i = 0; i &lt; 250; i ++ ) 
                {

                        var x = ( ( i % 27 )  - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);
                        var z = ( Math.floor( i / 27 ) - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);

                        mesh = new THREE.Mesh( obj_geometry, faceMaterial);

                        var s = THREE.Math.randFloat( 0.5, 2 ) * scaleAdj;
                        mesh.scale.set( s, s, s );

                        mesh.position.set( x, 0, z );
                        mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );

                        mesh.matrixAutoUpdate = false;
                        mesh.updateMatrix();

                        scene.add( mesh );

                }

                //--------------------------------------

                scene.add( new THREE.AmbientLight( 0xffffff ) );

                // ground
                var textureLoader = new THREE.TextureLoader();
                var groundTexture = textureLoader.load(  "texture.jpg" );
                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
                groundTexture.repeat.set( 40, 40 );
                groundTexture.anisotropy = 16;

                var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
                mesh.position.y = 0;
                mesh.rotation.x = - Math.PI / 2;
                mesh.receiveShadow = true;
                scene.add( mesh );

                // Renderer

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.setClearColor( scene.fog.color );

                container.appendChild( renderer.domElement );

                // Events

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

            }


            function onWindowResize( event ) {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }



        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is a copy of the contents of the cube.json file:</p>

<pre><code>{
    "uvs":[[0,0,1,0,1,1,0,1]],
    "faces":[43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,0,1,2,3,4,5,6,7,43,0,4,5,1,0,0,1,2,3,0,4,7,1,43,1,5,6,2,0,0,1,2,3,1,7,6,2,43,2,6,7,3,0,0,1,2,3,2,6,5,3,43,4,0,3,7,0,0,1,2,3,4,0,3,5],
    "normals":[0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "metadata":{
        "generator":"io_three",
        "type":"Geometry",
        "normals":8,
        "vertices":8,
        "uvs":1,
        "version":3,
        "materials":1,
        "faces":6
    },
    "vertices":[1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
    "materials":[{
        "DbgName":"Material",
        "colorSpecular":[0.5,0.5,0.5],
        "DbgIndex":0,
        "mapDiffuseWrap":["RepeatWrapping","RepeatWrapping"],
        "mapDiffuse":"texture.jpg",
        "shading":"phong",
        "depthTest":true,
        "opacity":1,
        "transparent":false,
        "colorDiffuse":[0.64,0.64,0.64],
        "mapDiffuseAnisotropy":1,
        "blending":"NormalBlending",
        "depthWrite":true,
        "visible":true,
        "specularCoef":50,
        "mapDiffuseRepeat":[1,1],
        "colorEmissive":[0,0,0],
        "wireframe":false,
        "DbgColor":15658734
    }],
    "name":"CubeGeometry"
}
</code></pre>

<p>And here is <a href="http://i.stack.imgur.com/mRP7i.jpg" rel="nofollow">an attached texture</a> which could be used.</p>

<p>It might just be a trivial problem for some of the posters on here, and if so, thanks in advance for just letting me know what it is. If not, then the answer could be useful to a lot more people, and thanks for any help you can give on it. </p>