ThreeJS is having trouble loading JSON files

Question

ThreeJS is having trouble loading JSON files

After reading through this particular question, I unfortunately did not find the help I was seeking.

Here's my process: First, I export a model from Cinema 4D to .obj format. Then, I import the obj file into www.threejs/editor.

I fill in all the necessary information.

Next, from the scene tree, I select my object and export it as a Three.js Object, which saves as a .json file.

Here is the snippet of my code:

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
var object3D = new THREE.Object3D(), loader = new THREE.JSONLoader(true);
loader.load( "brikk2.json", function ( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff0000, ambient: 0xff0000 } ) );
    scene.add( mesh );
}); 
           var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>

Upon running this code, I encountered the following error messages:

THREE.WebGLRenderer 67                             three.js:20806
THREE.WebGLRenderer: elementindex as unsigned integer not supported.         three.js:26942
XHR finished loading: "http://xxxxxx.xx/tst/mrdoob-three2/brikk2.json".     three.js:12018
    THREE.JSONLoader.loadAjaxJSON                  three.js:12018
    THREE.JSONLoader.load                          three.js:11942
    load                                           test.html:23
     (anonymous function)                          test.html:28
 Uncaught TypeError: Cannot read property 'length' of undefined             three.js:12087
    parseModel                                                      three.js:12087
    THREE.JSONLoader.parse                                          three.js:12028
    xhr.onreadystatechange                                          three.js:11969

This is the structure of the JSON file I loaded:

{
"metadata": {
    "version": 4.3,
    "type": "Object",
    "generator": "ObjectExporter"
},
"geometries": [
    {
        "uuid": "213E28EF-E388-46FE-AED3-54695667E086",
        "name": "brikkG",
        "type": "Geometry",
        "data": {
            "vertices": [0.036304,-0.016031,-0.027174,0.036304,0.......


      ........ 232,1228,1139,1141,1140,1]
        }
    }],
"materials": [
    {
        "uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
        "name": "lego",
        "type": "MeshPhongMaterial",
        "color": 16721408,
        "ambient": 16777215,
        "emissive": 0,
        "specular": 16777215,
        "shininess": 30,
        "opacity": 1,
        "transparent": false,
        "wireframe": false
    }],
"object": {
    "uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6",
    "name": "BrikkM",
    "type": "Mesh",
    "geometry": "213E28EF-E388-46FE-AED3-54695667E086",
    "material": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
    "matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1]
      }
     }

I have exhausted all my efforts trying different methods to import native JSON into Three.js, using files from both the Three.js Editor and clara.io. Unfortunately, I keep encountering the same error message and I am completely at a loss after spending 3 days attempting to rectify this issue.

If I attempt to create geometry like CubeGeometry, it renders without any issues. However, as soon as I try to work with native JSON objects, nothing seems to work anymore.

Can someone lend me a hand?

javascript json three.js

Answer 1

Answer №1

Alright, I discovered the solution over at:

The original JSON code is actually perfect; it just needs to be loaded using ObjectLoader instead of JSONLoader (don't confuse it with OBJLoader like I did in one of my experiments). JSONLoader is designed for loading JSON data with a specific format/structure, while ObjectLoader is meant for loading native data that is also written in JSON but follows a different structure/format.

Therefore, use this:

var loader = new THREE.ObjectLoader();
loader.load( 'brikk2.json', function ( object ) {

            scene.add( object );

} );

and it will work successfully.

Here's a complete example code snippet:

<body>
    <script src="build/three.min.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff, 1);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );
    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );
    var loader = new THREE.ObjectLoader();
    loader.load( 'brikk2.js', function ( object ) {
        scene.add( object );
    } );
    camera.position.z = 5;
    var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>
</body>

UPDATE

The initial code I presented earlier in the question was correct, but it was specifically for Geometry loading.

loader = new THREE.JSONLoader();
loader.load( 'ugeometry.json', function ( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'environment.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } ) );
scene.add( mesh );

So, here's the summary:

If you save as GEOMETRY from threes/editor or Clara.io, use JSONLoader. If you save as OBJECT, utilize ObjectLoader. And if you save as SCENE, there should be a SceneLoader (not yet confirmed).

Answer 2

Alright, I discovered the solution over at:

The original JSON code is actually perfect; it just needs to be loaded using ObjectLoader instead of JSONLoader (don't confuse it with OBJLoader like I did in one of my experiments). JSONLoader is designed for loading JSON data with a specific format/structure, while ObjectLoader is meant for loading native data that is also written in JSON but follows a different structure/format.

Therefore, use this:

var loader = new THREE.ObjectLoader();
loader.load( 'brikk2.json', function ( object ) {

            scene.add( object );

} );

and it will work successfully.

Here's a complete example code snippet:

<body>
    <script src="build/three.min.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff, 1);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );
    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );
    var loader = new THREE.ObjectLoader();
    loader.load( 'brikk2.js', function ( object ) {
        scene.add( object );
    } );
    camera.position.z = 5;
    var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>
</body>

UPDATE

The initial code I presented earlier in the question was correct, but it was specifically for Geometry loading.

loader = new THREE.JSONLoader();
loader.load( 'ugeometry.json', function ( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'environment.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } ) );
scene.add( mesh );

So, here's the summary:

If you save as GEOMETRY from threes/editor or Clara.io, use JSONLoader. If you save as OBJECT, utilize ObjectLoader. And if you save as SCENE, there should be a SceneLoader (not yet confirmed).

ThreeJS is having trouble loading JSON files

Answer №1

Similar questions

When attempting to download a PDF file through an API using JavaScript and React JS, it is found to be empty

I simply aim to remove a single piece of news at a time, yet somehow I manage to delete more than intended

Reproducing a table row

Should I return X in async functions, or should I return "Promise.Resolve(X)"?

Timer for searching webpages using Javascript

Error: JSON requires string indices to be integers

A technique for making the placeholder flash when an input textfield loses focus

What is the best way to extract a generic class parameter from JSON in Scala?

Utilize AngularJS ngResource to transmit JSON data to the server and receive a response

"The challenge of achieving a transparent background with a PointMaterial texture in ThreeJS

Creating a buffered transformation stream in practice

Filter the ng-repeat in Angular based on the model's value

Remove an item from an array of objects based on its value

How about a demonstration of Angular and Ionic working together in a chat

Is there a way to extract only the initial row of information from a Google sheet using Vue.js?

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

Unable to convert the object to JSON format

Is there a way to identify which specific item in a watched array has been altered in VueJS?

Is it possible to access an image's width and height in Jekyll Liquid syntax while iterating through a for loop, and then convert it to a JavaScript variable?

Failure to load content into element with .load function