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

0

美好的一天，我怀疑问题出在“tAO”制服上。代替：

uniforms["tAO"].texture = THREE.ImageUtils.loadTexture("AO.jpg");

更改.texture为.value

uniforms["tAO"].value = THREE.ImageUtils.loadTexture("AO.jpg");

GL 错误可能是缺少纹理贴图的结果。否则代码看起来很好。如果一切都失败了，只启用并推送法线和漫反射贴图，看看从哪里开始。

于 2013-08-29T12:14:12.157 回答