Question

好的，我已经宣布了一个新的材质着色器（一个简单的法线贴图），我正在尝试将它应用到一个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给了我警告，屏幕上没有任何内容。

如何解决此问题？

Answer 1

美好的一天，我怀疑问题在于“tAO”制服。而不是：

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

将.texture更改为.value

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

GL错误可能是缺少纹理贴图的结果。否则代码看起来很好。如果所有其他方法都失败了，则只启用并推送普通地图和漫反射地图，并查看可以从哪里开始。

无法将着色器应用于OBJ

1 个答案: