三.js - geometry.faceVertexUvs[0][0][index] 与 geometry.vertices[index] 不同 [英] three.js - geometry.faceVertexUvs[0][0][index] is not the same as geometry.vertices[index]

问题描述

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

As far as I understand it, you can access the uv coords ("texels") of each vertex of a mesh using:

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

我挣扎的是 vertexIndex 似乎遵循与

What I am struggling with is that the vertexIndex seems to follow a different mapping order than

geometry.vertices[ vertexIndex ]

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

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

以上代码执行以下操作:

The above code does the following:

• 创建一个平面

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

• Creates a plane

• Draws a sphere at the location of the plane's vertex of index 1 using a utility dot function:

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

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

Modifies the texel at faceVertexUvs[0][0][1] so we can see where texel 1 is

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

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

You can see in the example page, the sphere is being drawn on the top right of the plane (location of vertex 1), while the texel being modified is on the bottom left of the plane. The indices of the vertices do not line up! Is this a three.js bug, or am I missing something about texels?

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

I have found that the vertices seem to map like this:

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

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

However, I am seeing some other unexpected behavior while trying to accomplish a related uv mapping task, so I don't know if the mapping is the source of my error.

推荐答案

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

I don't know if there is a better way, but the mapping appears to work as such:

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

vertexIndex 对应的是 face 的顶点索引，而不是几何顶点数组.虽然显示为 0-3(四边形)的数字，但实际人脸将值定义为广告(来自 Face4 文档):

vertexIndex corresponds to the vertex index of the face, not the geometry vertex array. While presented as a number from 0-3 ( for a quad ), the actual face defines the values as a-d (from 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 数组中查找.这是一种愚蠢但实用的方法:

So, to map between them, we need to find the face at that index, and map 0 to a, 1 to b, etc, and then look that up in the geometry.vertices array. Here's a silly but functional way:

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

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

Where vertexIndex is that provided by faceVertexUvs[0][faceIndex][vertexIndex]. The fromCharCode maps a to 0 and so on. Now we have the vertex (and it's position) for each uv texel! Woooo!

这篇关于三.js - geometry.faceVertexUvs[0][0][index] 与 geometry.vertices[index] 不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！