Three JS - Uncaught TypeError: Cannot read property 'length' of undefined at THREE.JSONLoader.parse

Question

I'm trying to just render a blender exported json(exported to use in three js). I'm doing that as follows.

    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>Three.js JSON Loader Demo</title>
    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript">

    var renderer;  // A three.js WebGL or Canvas renderer.
    var scene;     // The 3D scene that will be rendered, containing the model.
    var camera;    // The camera that takes the picture of the scene.
    var light;     // A light shining from the direction of the camera.

    var model; // The three.js object that represents the model.

    var rotateX = 0;   // rotation of model about the x-axis
    var rotateY = 0;  // rotation of model about the y-axis

    function modelLoadedCallback(geometry, materials) {

        var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

        /* Determine the ranges of x, y, and z in the vertices of the geometry. */

        var xmin = Infinity;
        var xmax = -Infinity;
        var ymin = Infinity;
        var ymax = -Infinity;
        var zmin = Infinity;
        var zmax = -Infinity;

        for (var i = 0; i < geometry.vertices.length; i++) {
            var v = geometry.vertices[i];
            if (v.x < xmin)
                xmin = v.x;
            else if (v.x > xmax)
                xmax = v.x;
            if (v.y < ymin)
                ymin = v.y;
            else if (v.y > ymax)
                ymax = v.y;
            if (v.z < zmin)
                zmin = v.z;
            else if (v.z > zmax)
                zmax = v.z;
        }

        /* translate the center of the object to the origin */
        var centerX = (xmin+xmax)/2;
        var centerY = (ymin+ymax)/2; 
        var centerZ = (zmin+zmax)/2;
        var max = Math.max(centerX - xmin, xmax - centerX);
        max = Math.max(max, Math.max(centerY - ymin, ymax - centerY) );
        max = Math.max(max, Math.max(centerZ - zmin, zmax - centerZ) );
        var scale = 10/max;
        object.position.set( -centerX, -centerY, -centerZ );
        console.log("Loading finished, scaling object by " + scale);
        console.log("Center at ( " + centerX + ", " + centerY + ", " + centerZ + " )");

        /* Create the wrapper, model, to scale and rotate the object. */

        model = new THREE.Object3D();
        model.add(object);
        model.scale.set(scale,scale,scale);
        rotateX = rotateY = 0;
        scene.add(model);
        render();

    }

    function render() {
        renderer.render(scene, camera);
    }


    function init() {
        try {
            var theCanvas = document.getElementById("cnvs");

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
            camera.position.z = 30;

            light = new THREE.DirectionalLight();
            light.position.set(0,0,1);
            renderer = new THREE.WebGLRenderer( { 
                    canvas: theCanvas, 
                    antialias: true
                    } );

            scene.add(light);
            render();

            var loader = new THREE.JSONLoader();
            loader.load("DummyBox.js", modelLoadedCallback);

        }
        catch (e) {
            document.getElementById("message").innerHTML = "Sorry, an error occurred: " + e;
        }
    }

    </script>
    </head>
    <body onload="init()" bgcolor="#CCC">

    <noscript>
    <p style="color: #A00; font-weight: bold">Sorry, but this page requires JavaScript!</p>
    </noscript>

    <div style="float:left">
    <canvas width=350 height=400 id="cnvs" style="background-color:black"></canvas>
    </div>

    </body>
    </html>

The Contents of DummyBox.js is

{
    "metadata":{
        "generator":"io_three",
        "type":"BufferGeometry",
        "normal":36,
        "version":3,
        "position":36
    },
    "data":{
        "index":{
            "type":"Uint16Array",
            "itemSize":1,
            "array":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
        },
        "attributes":{
            "position":{
                "type":"Float32Array",
                "itemSize":3,
                "array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1]
            },
            "normal":{
                "type":"Float32Array",
                "itemSize":3,
                "array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1]
            }
        }
    }
}

I'm new to Three js and not able to figure out what is the problem. Is there any website i can go through.. Is there any problem in Exported JSON file.

i think i should use BufferGeometryLoader. But getting this error, Cant find constructor THREE.BufferGeometryLoader — Harish_N
– Harish_N, Commented Apr 10, 2017 at 17:26
Correct, THREE.JSONLoader won't load this data. You need to use THREE.BUfferGeometryLoader. I don't know why you're getting an error though. Are you sure THREE.js is included in your page correctly?For how you have it referenced, three.min.js must be at the same location as your HTML file. — TheJim01
– TheJim01, Commented Apr 10, 2017 at 18:27

Community · Accepted Answer · 2017-05-23 12:10:28Z

2

The json script looks ok. If you replace the loader class ( as already mentioned by @TheJim01 )

var loader =  new THREE.BufferGeometryLoader(); //new THREE.JSONLoader();

and handle the geometry like this in the modelLoadedCallback function (more here):

var geometry = new THREE.Geometry().fromBufferGeometry(geometry);

you will go through without errors.

PS. The materials parameter in modelLoadedCallback function is undefined. You can define it like this:

var materials = new THREE.MeshLambertMaterial({color:0xff0000});

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 10, 2017 at 21:51

cameraman

2521 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harish_N Over a year ago

I'am getting error in line 'var loader = new THREE.BufferGeometryLoader()' Error is : Constructor BufferGeometryLoader is not available.

cameraman Over a year ago

Download and use the latest threejs minified library here

Collectives™ on Stack Overflow

Three JS - Uncaught TypeError: Cannot read property 'length' of undefined at THREE.JSONLoader.parse

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related