Nick
Nick

Reputation: 19684

ThreeJS - JSONLoader "Cannot read property 'uniforms' of undefined

I'm trying export an object with a texture from Blender. The exported JSON looks like so:

 {

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.66 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "unicorn.jpg",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

    "vertices" : [1,-1,-1,1,-1,1,-1,-1,1,-0.999999,-1,-1,1,1,-0.999999,0.999999,1,1,-1,1,0.999999,-1,1,-1],

    "morphTargets" : [],

    "normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],

    "colors" : [],

    "uvs" : [],

    "faces" : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animation" : {}


}

My Json loader:

 var object;
var loader = new THREE.JSONLoader();          

loader.load( "models/texturecube.js", function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    object = new THREE.Mesh(geometry, materials); // throws

    object.scale.set(1, 1, 1);
    scene.add(object)

});

The loader throws "Cannot read property 'uniforms' of undefined" exception. I see that others have to modify the exported JSON to get it to work correctly. Does anyone have an idea what the 'uniforms' property is used for? Should I have this defined in my JSON?

Thanks!

Upvotes: 4

Views: 8046

Answers (2)

WestLangley
WestLangley

Reputation: 104823

Your material variable is not being used. Do this:

object = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

Also, your geometry will need UVs if you want to be able to apply the texture.


EDIT: There is a new pattern. If you have an array of materials, you can now pass the materials array directly into the Mesh constructor like so:

object = new THREE.Mesh( geometry, materials );

three.js r.87

Upvotes: 6

Ken Herbert
Ken Herbert

Reputation: 5236

You are only passing a single material to your object in the line:

var material = new THREE.MeshFaceMaterial(materials[0]);

Instead you need to pass the full array of materials like this:

var material = new THREE.MeshFaceMaterial(materials);

Essentially what is causing the error is that when your model tries to access any material other than the first it is throwing an undefined error because the material does not exist as you haven't passed it to the object constructor.

Upvotes: 0

Related Questions