在带有webgl的着色器程序中使用Texturecoord绘制模型

Question

我正在使用webgl绘制模型。当我不使用纹理时，没有任何问题。

此代码正常工作

const messagesOrganised = messagesGroupedByName.reduce((acc, msg) => {
  if (!acc[msg.groupBy]) {
    acc[msg.groupBy] = [msg];
  } else {
    acc[msg.groupBy].push(msg);
  }
  return acc;  // <<<< You need to return accumulated value from callback
});

但是当我添加纹理绘制模型时，出现错误。 glDrawArrays：尝试访问属性1中超出范围的顶点

这是我的着色器程序代码

var VertexShaderCode =  "precision mediump float;"+
                         "attribute vec3 vertexPos;\n" +
                         "uniform mat4 modelViewMatrix;\n" +
                         "uniform mat4 projectionMatrix;\n" +
                         "    void main(void) {\n" +
                         "    gl_Position =  projectionMatrix * modelViewMatrix * vec4(vertexPos, 1.0); \n" +

                         "}\n";


 var vertexShader = gl.createShader(gl.VERTEX_SHADER)
 gl.shaderSource(vertexShader, VertexShaderCode)
 gl.compileShader(vertexShader)

 var FragmentShaderCode = "precision lowp float;"+
                           "uniform vec4 color;"+
                           "void main() { "+
                           "  gl_FragColor = vec4(color);"+
                           "}"

 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
 gl.shaderSource(fragmentShader, FragmentShaderCode)
 gl.compileShader(fragmentShader)
 var shaderProgram= gl.createProgram()
 gl.attachShader(shaderProgram, vertexShader )
 gl.attachShader(shaderProgram, fragmentShader )
 gl.linkProgram(shaderProgram)
 return shaderProgram

有什么想法吗？