Question

所以我写了一些WebGL， 没有THREE.JS 。我正在尝试渲染一个立方体，其中一个纹理映射到立方体的每个面。在我设置属性的代码中，我有类似的东西：

  var vertices = new Float32Array([
    // x,    y,    z                              u, v
     1.0,  1.0,  1.0, /* v0 right top front */    1.0, 1.0,
    -1.0,  1.0,  1.0, /* v1 left top front */     0.0, 1.0,
    -1.0, -1.0,  1.0, /* v2 left bottom front */  0.0, 0.0,
     1.0, -1.0,  1.0, /* v3 right bottom front */ 1.0, 0.0,
     // u's switch for back faces
     1.0, -1.0, -1.0, /* v4 right bottom back */  0.0, 0.0,
     1.0,  1.0, -1.0, /* v5 right top back */     0.0, 1.0,
    -1.0,  1.0, -1.0, /* v6 left top back */      1.0, 1.0,
    -1.0, -1.0, -1.0, /* v7 left bottom back */   1.0, 0.0
  ]);

  // the pairs of vertex triples
  // 3 vertices = 1 triangle
  // 2 triangles = 1 quad = 1 face
  var indices = new Uint8Array([
    0, 1, 2,  0, 2, 3, // front
    0, 3, 4,  0, 4, 5, // right
    //0, 5, 6,  0, 6, 1, // top
    1, 6, 7,  1, 7, 2, // left
    //7, 4, 3,  7, 3, 2, // bottom
    4, 7, 6,  4, 6, 5  // back
  ]);

我用一个立方体结束，右侧和左侧的纹理反射，这很好。对于顶部和底部，由于两条注释掉的线条，我没有面孔。当我评论它们时，脸部没有像我预期的那样采样纹理。果然，如果你看一下顶面的索引，以及它们会有的UV坐标：

index | u   | v
  0   | 1.0 | 1.0
  1   | 0.0 | 1.0
  5   | 0.0 | 1.0
  6   | 1.0 | 1.0

所以我们可以看到索引1和5（也是0和6）具有相同的UV坐标，所以当然它在四边形上看起来不正确。

我一直试图在纸上画画，但我无法改变紫外线而不会弄乱另一张脸的坐标。我想知道的是：是否可以使用ELEMENT_ARRAY_BUFFER来映射多维数据集上的UV坐标，还是我需要使用更多数据并使用ARRAY_BUFFER进行绘制？

==编辑==

看起来像是一个骗子：OpenGL ES - texture map all faces of an 8 vertex cube?

Answer 1

讨厌回答我自己的问题，但根据提示here，我能够通过使用24个顶点而不是8来使其工作。我可以使用24而不是36，因为我＆＃39; m在我的ELEMENT_ARRAY_BUFFER中重复索引（我不能仅使用ARRAY_BUFFER）。

  var vertices = new Float32Array([
    // x,    y,    z,   u,   v
    // front face (z: +1)
     1.0,  1.0,  1.0, 1.0, 1.0, // top right
    -1.0,  1.0,  1.0, 0.0, 1.0, // top left
    -1.0, -1.0,  1.0, 0.0, 0.0, // bottom left
     1.0, -1.0,  1.0, 1.0, 0.0, // bottom right
    // right face (x: +1)
     1.0,  1.0, -1.0, 1.0, 1.0, // top right
     1.0,  1.0,  1.0, 0.0, 1.0, // top left
     1.0, -1.0,  1.0, 0.0, 0.0, // bottom left
     1.0, -1.0, -1.0, 1.0, 0.0, // bottom right
    // top face (y: +1)
     1.0,  1.0, -1.0, 1.0, 1.0, // top right
    -1.0,  1.0, -1.0, 0.0, 1.0, // top left
    -1.0,  1.0,  1.0, 0.0, 0.0, // bottom left
     1.0,  1.0,  1.0, 1.0, 0.0, // bottom right
    // left face (x: -1)
    -1.0,  1.0,  1.0, 1.0, 1.0, // top right
    -1.0,  1.0, -1.0, 0.0, 1.0, // top left
    -1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
    -1.0, -1.0,  1.0, 1.0, 0.0, // bottom right
    // bottom face (y: -1)
     1.0, -1.0,  1.0, 1.0, 1.0, // top right
    -1.0, -1.0,  1.0, 0.0, 1.0, // top left
    -1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
     1.0, -1.0, -1.0, 1.0, 0.0, // bottom right
    // back face (x: -1)
    -1.0,  1.0, -1.0, 1.0, 1.0, // top right
     1.0,  1.0, -1.0, 0.0, 1.0, // top left
     1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
    -1.0, -1.0, -1.0, 1.0, 0.0  // bottom right
  ]);

  // the pairs of vertex triples
  // 3 vertices = 1 triangle
  // 2 triangles = 1 quad = 1 face
  var indices = new Uint8Array([
     0,  1,  2,   0,  2,  3,
     4,  5,  6,   4,  6,  7,
     8,  9, 10,   8, 10, 11,
    12, 13, 14,  12, 14, 15,
    16, 17, 18,  16, 18, 19,
    20, 21, 22,  20, 22, 23
  ]);

滚动上面的代码示例^

顶点的数量可以进一步减少，因为一些索引共享相同的XYZ 和 UV坐标，但是如果我稍后向我的交错缓冲区添加法线（或任何其他属性），我可能需要重复的价值观。

ELEMENT_ARRAY_BUFFER可以用于在立方体的每个面上映射相同纹理的纹理吗？

1 个答案: