3

我在自定义 3D 形状上渲染纹理时遇到问题。

使用以下参数：

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);

它给了我这个结果：

结果

更改以下参数：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

它给了我这个：

结果2

并使用这些参数：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

结果3

我尝试更改纹理坐标，但没有成功，这里用于每个面的坐标是： 0.0, 0.0, 0.0, 10.0, 10.0, 10.0, 10.0, 0.0

知道为什么一个三角形（实际上是平行面上的 2 个）表现得很奇怪吗？

4

1 回答 1

1

问题是您正在使用具有不同点数的面 - 但仍然使用固定数量 (4) 的纹理坐标作为面。由于某些面有 5 个点，因此在某些时候纹理坐标会“移动”。

相反，您应该像添加顶点一样添加它们：

for (var j=0; j < face.length; j++){
    vertices...

     //generate texture coords, they could also be stored like the points
     textureCoords.push(points[face[j]][0] / 4);
     textureCoords.push((points[face[j]][1]+points[face[j]][2]) / 4);

http://jsfiddle.net/bNTkK/9/

于 2013-04-25T17:57:48.703 回答