CODEWITHSUNDEEP
json3dthree.jsundefinedblender
Rob Ferreira
Rob Ferreira

Reputation: 83

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

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

Upvotes: 8

Views: 6965

Answers (4)

mindstorm8191
mindstorm8191

Reputation: 11

As roadkill stated earlier, exporting as Geometry instead of BufferedGeometry works.

Also note that loading JSON model loading is handled asyncronously (the callback is only called only when the operation is completed, the rest of your code keeps running). The model won't exist for the first frame or two, so check that your model exists before doing any operations with it inside the animation loop.

Upvotes: 1

roadkiII
roadkiII

Reputation: 161

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

Upvotes: 6

Komsomol
Komsomol

Reputation: 742

I have the same issue with the new exporter.

If select SCENE then I usually get "Cannot read property 'length' of undefined"

If I select only the object and the materials and vertices. It usually just seems to get stuck forever.

UPDATE

Check this response to this issue!

Threejs blender exporter exports in wrong format

Upvotes: 1

Greg Findon
Greg Findon

Reputation: 86

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.

Upvotes: 3

Related Questions