javascript - three.js - geometry.faceVertexUvs[0][0][index] 与 geometry.vertices[index] 不同

Question

据我了解，您可以使用以下方法访问网格每个顶点的 uv 坐标(“纹素”):

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

我正在努力解决的问题是 vertexIndex 似乎遵循与

不同的映射顺序

geometry.vertices[ vertexIndex ]

我创建了一个示例来演示这个问题:http://andrewray.me/stuff/test-uv2.html

来源:http://andrewray.me/stuff/uv2.js

上面的代码做了以下事情:

• 创建一个平面

• 使用实用程序 dot 函数在索引 1 的平面顶点位置绘制一个球体:

  dot( floor.localToWorld( floor.geometry.vertices[1].clone() ) );

• 修改 faceVertexUvs[0][0][1] 处的纹素，以便我们可以看到纹素 1 在哪里

  floor.geometry.faceVertexUvs[0][0][1].add( new THREE.Vector2( 0.4, 0 ) );

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

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

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

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

Answer 1

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

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

vertexIndex 对应于 face 的顶点索引，而不是几何顶点数组。虽然显示为 0-3 的数字(对于四边形)，但实际面将值定义为 a-d(来自 Face4 docs):

Face4( a, b, c, d ... )

> geometry.faces[0] // assuming faceIndex is 0
THREE.Face4 {a: 0, b: 2, c: 3, d: 1, normal: THREE.Vector3…}

看那个，这是我们的映射!

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

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

其中 vertexIndex 是由 faceVertexUvs[0][faceIndex][vertexIndex] 提供的。 fromCharCode 将a 映射到0 等等。现在我们有了每个 uv 纹素的顶点(及其位置)!哇哦!