Three.js JSONLoader blender model error: property 'length' undefined

Question

I have been trying out Three.js lately and i used the exporter addon for Blender to test out making models in blender and exporting so i can use them in a three.js program.

I included the add-on to blender, and using just the basic cube model of blender, exported it to .json as the exporter says. Then i imported the model into my three.js using this as a guide but that gave me an error:

Uncaught TypeError: Cannot read property 'length' of undefined.

Ive already searched online and tried a few different approaches(like including a materials in the function call of the loader) but nothing seems to work.

I also checked stackoverflow for answers but so far nothing seems solved. If anyone would clarify what im doing wrong I would be very grateful.

The code for my three.js program:

var WIDTH = 1000,
        HEIGHT = 1000;


var VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000;


var radius = 50,
        segments = 16,
        rings = 16;

var sphereMaterial =
        new THREE.MeshLambertMaterial(
                {
                    color: 0xCCCCCC
                });


var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(
                radius,
                segments,
                rings),
        sphereMaterial);



var pointLight =
        new THREE.PointLight(0x660000);


var $container = $('#container');


var renderer = new THREE.WebGLRenderer();
var camera =
        new THREE.PerspectiveCamera(
                VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR);

var scene = new THREE.Scene();

var loader = new THREE.JSONLoader(); // init the loader util


scene.add(camera);


pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;


scene.add(pointLight);

camera.position.z = 300;


renderer.setSize(WIDTH, HEIGHT);

$container.append(renderer.domElement);
window.requestAnimFrame = (function () {
    return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
})();


loader.load('test.json', function (geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    scene.add(object);

});


(function animloop() {
    requestAnimFrame(animloop);

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

Answer 1

When you export, change the Type from buffergeometry to Geometry (Blender 2.76)

Answer 2

In my experience so far with the exporter, you have to be very careful which boxes you tick!

This length error is usually because you are either not exporting the vertexes, or exporting the scene rather the object.