Three.js texture on JSON mesh

Question

Using THREE.js, I cannot load a texture onto a mesh created from a JSON model. The attached fragment loads a simple cube from models/cube.json.

function loadRabbit()
{
    // Load the Rabbit JSON data using a THREE loadTexture

    var loader = new THREE.JSONLoader();
    loader.load( "models/cube.json", rabbitLoaded );  // Calls rabbitLoaded on completion
    //loader.load( "treehouse.json", rabbitLoaded );  // Calls rabbitLoaded on completion
}

function rabbitLoaded( geometry, materials ) {
    // Called when rabbit dataset loaded asynchronously
    console.log("rabbit Loaded !!");

    var texture = THREE.ImageUtils.loadTexture ("assets/textures/general/weave_512x512.jpg")
    var meshMaterial = new THREE.MeshBasicMaterial({color: 0x363cc9});
    meshMaterial.map = texture;


    // create the rabbit. make global
    var rm = new THREE.Mesh(geometry, meshMaterial);

    rabbitMesh = rm;
    spotLight.target = rabbitMesh;
    spotLight3.target = rabbitMesh;
    scene.add( rabbitMesh );
}

If line
//meshMaterial.map = texture;
is commented out, it works fine, with a plain blue cube rotating in the scene. And elsewhere in the code I create a sphere:

function makeMarkerSpheres(size) {
    // Creates a 'marker' sphere in red, to help locate position in 3D. Not used in production.
    var sphereGeo = new THREE.SphereGeometry(size, 32, 32);
    var texture = THREE.ImageUtils.loadTexture ("assets/textures/general/weave_512x512.jpg")

    var sphereMatl = new THREE.MeshBasicMaterial({color: 0xcd9141});
    sphereMatl.map = texture;
    var sphere1 = new THREE.Mesh(sphereGeo, sphereMatl);
    sphere1.position.set(1,1,1);
    return sphere1;
}

and this works perfectly, a rotating cube with a coarse basket weave texture. But the code at the top produces this error (in the browser console log):
[.WebGLRenderingContext-0x7ffd54a5e5d0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

cube.json is:

` 
{
"metadata" : {},
"scale" : 0.5,
"materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "default",
    "vertexColors" : false
    }],
"vertices": [-3,3,-3,3,3,-3,-3,-3,-3,3,-3,-3,-3,3,3,3,3,3,-3,-3,3,3,-3,3],
"faces": [0,0,1,2,0,3,2,1,4,4,6,7,4,5,4,7,0,1,5,3,0,5,7,3,0,0,2,4,0,4,2,6,0,1,4,5,0,1,0,4,       0,6,2,7,0,2,3,7],
"morphTargets": [],
"normals": [],
"colors": [],
"uvs": [[]]
}`

I presume I am missing something essential from the JSON, but I have no idea what, any help greatly appreciated.

Complete code is on bitbucket

Answer 1

If you want to apply a texture to a json-loaded model, your json file must specify UVs.

three.js r.71