CODEWITHSUNDEEP
javascriptjsonthree.js
Luis E. Fraguada
Luis E. Fraguada

Reputation: 529

Three.js Error with THREE.ObjectLoader

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.

Upvotes: 0

Views: 5777

Answers (2)

mrdoob
mrdoob

Reputation: 19592

I think you should just do scene.add( result ) instead.

Upvotes: 0

Luis E. Fraguada
Luis E. Fraguada

Reputation: 529

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.

Upvotes: 2

Related Questions