Three.js Error with THREE.ObjectLoader

Question

I seem to be having issues with Three.ObjectLoader. I am exporting a scene in JSON Format 4.3. This scene includes geometries, materials, and lights. The scene opens in the Three.js Editor just fine without any errors.

I am working on firefox with Three.js r70 master. Here is a link to the generated json: https://gist.github.com/fraguada/d86637f7987096b361ea

In the viewer I am trying to write I am using the following code for the loading:

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

// instantiate a loader 

var loader = new THREE.ObjectLoader(manager);

loader.load( 
    // resource URL coming from other file
    Name, 
    // Function when resource is loaded 
    function ( result ) 
    { scene.add( result.scene ); }, 
    // Function called when download progresses 
    function ( xhr ) 
    { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }, 
    // Function called when download errors 
    function ( xhr ) 
    { console.log( 'An error happened' ); } 
);

In the console I see the following:

THREE.WebGLRenderer 70  three.min.js (line 513)
100% loaded content.js (line 117)
THREE.Object3D.add: undefined is not an instance of THREE.Object3D. three.min.js (line 164)
js/Test83.js 1 1    content.js (line 86)

The error also appears in the unminified three.js in line 7674

This issue also appears if I create geometry and other objects in the Three.js editor and export it as a scene.

The issue seems to be here: scene.add( result.scene ); Am incorrect in assuming the THREE.ObjectLoader can consume JSON from a file? In the code I post, if I remove scene.add( result.scene ); it seems the file loads at least (data loads, no geometry is visualized), as no errors appear. If I have scenes with many meshes, the progress gets output to the console (10% loaded, 20%loaded, etc).

Any insights would be much appreciated.

p.s. if I interrogate the result object before trying to scene.add( result.scene ); I see all of the JSON contents from the file. So it seems to load ok. I will see if I can track down any significant undefined objects to see if messing with them makes a difference. — Luis E. Fraguada
So the result.scene is the main culprit as the result actually could replace the existing scene. If I do that scene = result; then I get a full white world. Objects are there, but they seem to have no materials (although materials do appear as part of their properties). If I go through the children of the result, I can add the meshes to the scene and get them with the default flat material. So I am making progress, just seems there is a better way which I am missing that takes the results and displays them with the object loader. — Luis E. Fraguada

Luis E. Fraguada Luis E. Fraguada · Accepted Answer · 2015-02-02T09:26:47

After some more digging I realized I needed to use an THREE.XHRLoader to bring in the json, then use the THREE.ObjectLoader to parse the results. Something like this should work:

var loaderObj = new THREE.ObjectLoader();
var loader = new THREE.XHRLoader();
            loader.load( 'js/data.json', function ( text ) {
                text = "{ \"scene\" : " + text + " }";
                var json = JSON.parse( text );
                var scene = loaderObj.parse( json.scene );
            },
            // Function called when download progresses 
            function ( xhr ) 
            { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }, 
            // Function called when download errors 
            function ( xhr ) 
            { console.log( 'An error happened' ); }  );

This method works well, and was learned from inspecting the code generated when one publishes a scene through the ThreeJS Editor.

Three.js Error with THREE.ObjectLoader

2 Answers