Three.js importing Blender Model. Uncaught TypeError: Cannot read property 'x' of undefined

Question

I'm trying to import a 3d model from Blender to a Three.js project, but I still get this error: Uncaught TypeError: Cannot read property 'x' of undefined. This is the piece of code that creates the problem:

var loader= new THREE.JSONLoader();
loader.load('http://localhost/js/map.json', function(geometry) {
 mesh= new THREE.Mesh(geometry);
 scene.add(mesh);
});

And here you can find the json of the 3d model that was provided to me: http://s000.tinyupload.com/index.php?file_id=14990264909497963783

Any help to understand what does not work will be greatly appreciated.

Please don't use the JSON Blender exporter anymore. It's was removed several releases ago. Export your models as glTF and use GLTFLoader for loading. Read the following guide for more information: threejs.org/docs/index.html#manual/en/introduction/… — Mugen87

Marquizzo Marquizzo · Accepted Answer · 2018-12-26T18:41:49

You're trying to create a Mesh() without a material. You should be passing a material as the second argument of its constructor, like this:

var loader= new THREE.JSONLoader();
loader.load('http://localhost/js/map.json', function(geometry) {
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

You can read about creating a Mesh object in the documents. And as Mugen87 said, it's recommended you use the .gltf exporter instead of JSON because JSON has been deprecated.

Three.js importing Blender Model. Uncaught TypeError: Cannot read property 'x' of undefined

1 Answers