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

roadkiII · Accepted Answer · 2017-07-28 14:37:16Z

6

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

answered Jul 28, 2017 at 14:37

roadkiII

1612 silver badges5 bronze badges

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

Comments

Greg Findon · Accepted Answer · 2015-03-02 11:51:04Z

3

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.

answered Mar 2, 2015 at 11:51

Greg Findon

864 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:22Z

1

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 2, 2015 at 15:06

Komsomol

74210 silver badges27 bronze badges

1 Comment

bre Over a year ago

I had the same issue, but it was because i was using the wrong loader in threejs. To load an exported scene you have to use ObjectLoader instead of JSONLoader. Something like

var loader = new THREE.ObjectLoader(); 			loader.load('data/yourfile.json', function( obj ){ 				scene.add( obj ); 				animate();				 			});

. This solved my problem.

mindstorm8191 · Accepted Answer · 2018-06-26 09:52:37Z

1

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.

answered Jun 26, 2018 at 9:52

mindstorm8191

112 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related