Javascript webgl的obj文件中的纹理坐标

有一个包含以下内容的.obj文件：

# texcoords
vt 0.306641 0.5
vt 0.841797 0.5
vt 0.888672 0.5
vt 0.935547 0.5

# verts
v 0 2 0
v 0 2 -4
v 0 6 0
...

# faces
f 3/3/1 2/3/1 1/3/1
f 4/3/1 2/3/1 3/3/1
f 7/4/1 6/4/1 5/4/1
...

在faces部分，我们有三项：X/Y/Z，其中X是vertix的索引，Y是纹理坐标的索引

解析后，我有三个数组：顶点数组、面数组和纹理坐标数组。但正如我们所预期的，顶点和纹理坐标的长度并不相等。纹理坐标的长度等于面阵列的长度。但现在我不知道如何使用我的纹理坐标？我可以将纹理坐标传递给数组\u BUFFER\u元素吗？或者有其他方法吗？

通常，除非您需要将位置和纹理坐标展平到平行数组中

漫游面，为每个面生成新的位置texcoord对（或位置法线texcoord三元组）

伪码

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];


for each face
  renderablePositions.push(loadedPositions[face.positionIndex])
  renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];
renderableIndices = [];
idToIndexMap = {};


for each face
  id = `${face.positionIndex},${face.texcoordIndex}`;
  if (idToIndexMap[id] === undefined) {
    const index = renderablePositions.length   // or length / 3
    idToIndexMap[id] = index;
    renderablePositions.push(loadedPositions[face.positionIndex])
    renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])
  }
  renderableIndices.push(idToIndexMap[id])

现在，您可以使用

drawArrays

如果您想尝试重新索引新的renderablePositon/RenderableExcoords，则由您决定

伪码

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];


for each face
  renderablePositions.push(loadedPositions[face.positionIndex])
  renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];
renderableIndices = [];
idToIndexMap = {};


for each face
  id = `${face.positionIndex},${face.texcoordIndex}`;
  if (idToIndexMap[id] === undefined) {
    const index = renderablePositions.length   // or length / 3
    idToIndexMap[id] = index;
    renderablePositions.push(loadedPositions[face.positionIndex])
    renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])
  }
  renderableIndices.push(idToIndexMap[id])

现在，您可以使用

drawerelements

有几件事，一个面可以有3个以上的顶点，所以如果你想处理这种情况，你必须生成三角形

面可以具有负索引，表示相对于文件中到目前为止遇到的位置/法线/纹理坐标数的索引

---

我找到的最好的.obj参考是

阅读有关面规格的内容，包括顶点坐标、纹理坐标和法向量的单独索引。@Rabbid76我读过这篇文章，但我不明白现在如何在应用程序中使用纹理坐标。

3/2/1

表示顶点坐标3，纹理坐标2和法向量1。（指数从1开始，而不是从0开始）。非常感谢！你像往常一样救了我：）