Javascript 带有纹理的WebGL问题（奇怪的图形故障和映射问题）

我的问题是，当使用WebGL并试图读取OBJ模型时，纹理贴图都是扭曲的。这是它在搅拌机里的样子

当我这么说的时候，我可能完全不同意，但我相信在右边的窗口中，带红点的小白圈代表UV坐标（0,0），这意味着左边和/或下面的其他坐标包含负数

以下是WebGL中的输出

映射完全关闭（我已经尝试夹紧和重复没有用），中间有一些奇怪的噪声。所以我的问题是，如何从Blender中获得正确的UV坐标（介于0和1之间），以及如何消除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);

更新 不保持顶点顺序时：

---

通过确保我以（s，t）而不是（x，y，z）的形式抓取UV坐标进行修复。通过按2组（就像我应该做的那样）而不是按3组抓取单个坐标，我每次都能获得完美的纹理坐标贴图。

制作一个面并添加简单的纹理贴图（生成坐标），然后将其导出到obj并用文本编辑器打开。下面是OBJ文件结构，请确保正确导出它们。