I'm facing a challenge with a JSON file (map.js) that I use to load my geometry and material settings. This file is quite large, making manual edits challenging. Here is a snippet of what it looks like:
"materials": [ {
"DbgColor" : 2632490,
"DbgIndex" : 0,
"DbgName" : "ASPHALT_0"
},
{
"DbgColor" : 16777215,
"DbgIndex" : 1,
"DbgName" : "ROAD_MARKING_DASHED_0"
}],
"vertices": [-370.412496,0.000000,120.194495...
"morphTargets": [],
"morphColors": [],
"normals": [],
"colors": [],
"uvs": [[]],
"faces": [2,0,1,2,0...
Note for faces format: triangle with material
My approach to loading this file is like this:
var loader = new THREE.JSONLoader();
loader.load("map.js", function(geometry, materials){
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
scene.add(mesh);
loadRestOfScene();
});
Now, I'm trying to add a texture to a specific material within the materials array. I attempted the following:
materials[i].map = THREE.ImageUtils.loadTexture( 'road.jpg' );
However, upon loading the page, I encountered this warning:
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 index.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.
I've explored similar issues and suggestions, such as:
materials.needsUpdate = true;
geometry.buffersNeedUpdate = true;
geometry.uvsNeedUpdate = true;
Yet, these adjustments did not yield any changes. I'm left wondering if it's feasible to add a texture to a material that lacks it initially or if I'm overlooking a crucial detail here.