新しいマテリアル シェーダ (単純な法線マップ) を宣言しました。それを OBJ (単純な立方体) に適用しようとしています。
試してみると、Three.js は次のように教えてくれます。
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2
これは、OBJ をロードし、マテリアル シェーダーを宣言するコードの一部です。
// 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;
// If I use this code to load a mesh and apply the material, it works
//var geometry = new THREE.CubeGeometry(120, 120, 120);
//geometry.computeTangents();
//
//var mesh = new THREE.Mesh(geometry, material);
//scene.add( mesh );
// OBJ Model
// If I use this code to load the mesh and apply the material, it doesn't work
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);
});
結果: Three.js から警告が表示され、画面には何もレンダリングされません。
この問題を解決するにはどうすればよいですか?