When using THREE.js, I am facing difficulties loading a texture onto a mesh created from a JSON model. The code snippet below demonstrates loading 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;
}
This function works perfectly, creating a rotating cube with a coarse basket weave texture. However, the code at the top produces an error (in the browser console log):
[.WebGLRenderingContext-0x7ffd54a5e5d0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1The content of cube.json is as follows:
`
{
"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 believe there might be something crucial missing from the JSON data, but I'm unsure of what it could be. Any assistance would be greatly appreciated.
You can find the complete code on Bitbucket.