Currently, I am encountering an issue with applying a new material shader (a basic normal map) to an OBJ model (a simple cube) in Three.js.
Upon attempting to do so, I receive the following error message from Three.js:
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2
This section of code is responsible for loading the OBJ model and defining the material shader:
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
var diffuse = THREE.ImageUtils.loadTexture("diffuse.jpg");
var normal = THREE.ImageUtils.loadTexture("normal.jpg");
var discplacement = THREE.ImageUtils.loadTexture("displacement.jpg");
var specular = THREE.ImageUtils.loadTexture("specular.jpg");
//
var specularColor = 0xcccccc;
var diffuseColor = 0x888888;
var ambiantColor = 0xffffff;
var shader = THREE.ShaderLib["normalmap"];
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);
uniforms["enableAO"].value = true;
uniforms["enableDiffuse"].value = true;
uniforms["enableSpecular"].value = true;
uniforms["enableReflection"].value = true;
uniforms["enableDisplacement"].value = true;
uniforms["uShininess"].value = true;
uniforms["tAO"].texture = THREE.ImageUtils.loadTexture("AO.jpg");
uniforms["tNormal"].value = normal;
uniforms["uNormalScale"].value.set(1.0, 1.0);
uniforms["tSpecular"].value = normal;
uniforms["tDisplacement"].value = normal;
uniforms["uDisplacementScale"].value = 0;
uniforms["tDiffuse"].value = diffuse;
uniforms["uSpecularColor"].value.setHex(specularColor);
uniforms["uAmbientColor"].value.setHex(ambiantColor);
var parameters = {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
lights: true
};
var material = new THREE.ShaderMaterial(parameters);
material.needsUpdate = true;
// When I use this snippet to load a mesh and apply the material, it functions correctly
//var geometry = new THREE.CubeGeometry(120, 120, 120);
//geometry.computeTangents();
//
//var mesh = new THREE.Mesh(geometry, material);
//scene.add( mesh );
// OBJ Model
// However, when I attempt to load the mesh and apply the material using this portion of the code, it fails
var loader = new THREE.OBJLoader(manager);
loader.load('cube.obj', function (object) {
object.buffersNeedUpdate = true;
object.uvsNeedUpdate = true;
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
//child.material.overdraw = true
//child.material.map = texture;
}
});
scene.add(object);
});
The outcome observed: Three.js issues a warning and nothing gets displayed on the screen.
What steps can be taken to resolve this particular problem?