All geek questions in one place

Three.js error with THREE.ObjectLoader

I seem to be having problems with Three.ObjectLoader. I export the scene in 4.3 JSON format. This scene includes geometry, materials and lighting. The scene opens in the Three.js editor just fine, without errors.

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

In the viewer I'm trying to write, I use the following code to load:

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 unminified three.js on line 7674

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

The problem seems to be here: scene.add( result.scene ); Are you suggesting that THREE.ObjectLoader can use JSON from the file? In the code I send, if I delete scene.add( result.scene ); , it seems that the file is loading at least (data is being loaded, but the geometry is not visualized), since no errors occur. If I have scenes with many grids, the progress will be displayed on the console (10% loaded, loaded at 20%, etc.).

Any ideas would be greatly appreciated.

0
source share
2 answers

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

0
source

After some extra digging, I realized that I need to use THREE.XHRLoader to input json, and then use 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 studied when checking the code generated when the scene was published through the ThreeJS editor.

+2
source

Source: https://habr.com/ru/post/986901/

More articles:


All Articles