THREEjs can't use the material on the JSON Model when initializing. Gives me WebGL errors

Question

I am simply trying to get a material on a mesh that I exported from blender. The mesh shows up no problem when I use the JSONLoader, but I cant get the material I exported. I looked everywhere for an answer but no luck. Here is my code:

function init() {
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 10;
            camera.position.y = 3;

            scene = new THREE.Scene();

            loader = new THREE.JSONLoader(true);
            var texture = THREE.ImageUtils.loadTexture( 'bear_diffuse1.png' );
            var material = new THREE.MeshBasicMaterial({map: texture});

            loader.load( "bear_MODEL.js", createMesh, '' );
}

function createMesh(geometry, materials){
            mesh = new THREE.Mesh(geometry, THREE.MeshFaceMaterial(materials));
            mesh.scale.set( 5, 5, 5 );
            scene.add( mesh );
            camera.lookAt(mesh.position);
}

this just makes my model a random color. I have also tried:

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

for creating the mesh, but this gives me a webgl error:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

Am have been looking for an answer but everyone seems to be suggesting these options and none of them are working. Here are the materials that were exported from blender

"materials" : [ {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
    "colorDiffuse" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "bear_diffuse1.png",
    "mapDiffuseWrap" : ["repeat", "repeat"],
    "shading" : "Basic",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
},

{
    "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
    "colorDiffuse" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "bear_diffuse1.png",
    "mapDiffuseWrap" : ["repeat", "repeat"],
    "shading" : "Basic",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
},

Not sure where to go from here or what I am doing wrong. EDIT I Removed the texture from the material and it worked fine. Anyone know how to make the texture not throw a webGL error?

Jason Carroll Jason Carroll · Accepted Answer · 2013-06-20T18:25:20

I figured it out. My model had no UVs so the texture had nothing to map out to and thus a webGL error. Sorry for the pointless question.

THREEjs can't use the material on the JSON Model when initializing. Gives me WebGL errors

1 Answers