1

新しいマテリアル シェーダ (単純な法線マップ) を宣言しました。それを 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 から警告が表示され、画面には何もレンダリングされません。

この問題を解決するにはどうすればよいですか?

4

1 に答える 1