javascript - WebGL 纹理问题(奇怪的图形故障和映射问题)

Question

我的问题是，当使用 WebGL 并尝试读取 OBJ 模型时，纹理映射非常困惑。这是它在 Blender 中的样子。

当我这么说时，我可能完全不在话下，但我相信在右侧窗口中，带有红点的白色小圆圈代表 UV 坐标 (0,0)，这意味着左侧和/或下方的其他坐标其中包含负数。

这是 WebGL 中的输出

映射完全关闭(我尝试过夹紧和重复但无济于事)，并且中间有一些奇怪的噪音。所以我的问题是，如何从 Blender 获得介于 0 和 1 之间的正确 UV 坐标，并消除 WebGL 中的噪声。

这是在纹理传递到 WebGL 以便在绘制循环中渲染之前纹理加载方法的样子

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);

更新 当不保持顶点顺序时:

Answer 1

通过确保我以 (s,t) 而不是 (x,y,z) 的形式获取 UV 坐标来修复。通过按 2 组(就像我应该做的那样)而不是 3 组抓取各个坐标，我每次都能获得完美映射的纹理坐标。