CODEWITHSUNDEEP
three.js
Harish_N
Harish_N

Reputation: 2257

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

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.

Upvotes: 1

Views: 4103

Answers (1)

cameraman
cameraman

Reputation: 252

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});

Upvotes: 2

Related Questions