Object not loading with JSONLoader in ThreeJS: Cannot read property 'visible' of undefined

Question

I am trying to load an object model using the following code:

var loader = new THREE.JSONLoader();
loader.load('js/spacecraft.js', modelLoadedCallback);

function modelLoadedCallback(geometry) {
   spacecraft = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials));
   spacecraft.position.x = 0;
   spacecraft.position.y = 0;
   spacecraft.position.z = 0;
   mesh.add(spacecraft);
   scene.add( mesh );
}

Nonetheless, in every renderer.render(..) call I am getting the following error:

Uncaught TypeError: Cannot read property 'visible' of undefined

I have no idea about the error because both the mesh and spacecraft objects seem to be properly loaded when inspecting in the console.

Am I missing something with the JSONLoader?

Answer 1

I see what was happening: the model in spacecraft.js had an empty materials array for some reason... I need to find out the cause because I used NodeJS three-obj library for converting .obj to .JSON

Answer 2

Could you give the line number/file of that error? It could be inside of spacecraft, or at some other line in your code?

look in js/spacecraft.js and find what is trying to use .visible, e.g. myObj.visible A quick-fix is to surround this with if(myObj != undefined){ ... }; But a more general fix would be to find out why myObj.visible is undefined in the first place.