Javascript three.js-geometry.faceVertexUvs[0][0][index]与geometry.Vertex[index]不同

据我所知，可以使用以下方法访问网格每个顶点的uv坐标（“texel”）：

geometry.faceVertexUvs[ materialIndex ][ faceIndex ][ vertexIndex ]

我正在努力解决的是，

vertexIndex

似乎遵循的映射顺序与

geometry.vertices[ vertexIndex ]

我创建了一个示例来演示这个问题：

来源：

上述代码执行以下操作：

• 创建一个平面
• 使用实用程序

  dot

  函数在索引

  1

  的平面顶点位置绘制球体：

  dot（floor.localToWorld（floor.geometry.vertices[1].clone（））
  

• 在

  faceVertexUvs[0][0][1]

  处修改texel，以便我们可以看到texel

  1

  的位置

  floor.geometry.faceVertexUvs[0][0][1]。添加（新的三个.Vector2（0.4,0））
  

在示例页面中可以看到，球体绘制在平面的右上角（顶点1的位置），而修改的纹理位于平面的左下角。顶点的索引没有对齐这是一个three.js错误，还是我遗漏了一些关于texels的信息？

我发现顶点似乎是这样映射的：

texel index | vertex index
0           | 3
1           | 1
2           | 0
3           | 2

---

但是，在尝试完成相关的uv映射任务时，我看到了一些其他意外行为，因此我不知道映射是否是我错误的来源。

我不知道是否有更好的方法，但映射似乎是这样工作的：

geometry.faceVertexUvs[ 0 ][ faceIndex ][ vertexIndex ]

vertexIndex

对应于面的顶点索引，而不是几何体顶点数组。当显示为0-3之间的数字时（对于四元组），实际面将值定义为a-d（从）：

看，这是我们的地图

所以，要在它们之间映射，我们需要找到该索引处的面，然后将0映射到a，1映射到b，等等，然后在geometry.vertices数组中查找。下面是一个愚蠢但实用的方法：

geometry.vertices[
    geometry.faces[faceIndex][ String.fromCharCode(97 + vertexIndex) ]
];

其中，vertexIndex是由

faceVertexUvs[0][faceIndex][vertexIndex]

提供的。

fromCharCode

将

a

映射到

0

，依此类推。现在我们有了每个uv纹理的顶点（及其位置）！哇

geometry.vertices[
    geometry.faces[faceIndex][ String.fromCharCode(97 + vertexIndex) ]
];