在three.js中绘制交错排列的四边形。

Question

我正在尝试在three.js中绘制一个四边形，但three.js不断抱怨'tex'不是'WebGLTexture'并拒绝运行，这里出了什么问题？谢谢。

// z= depth, tex is texture
function drawQuad(z, tex)
{
  var verts = [      
    -1.0,  1.0, z, 0.0, 1.0,
    -1.0, -1.0, z, 0.0, 0.0,
    1.0,  1.0, z, 1.0, 1.0,
    1.0, -1.0, z, 1.0, 0.0,      
  ];    

  const gl = renderer.getContext();  

  gl.disable(gl.DEPTH_TEST);

  gl.useProgram(quadShader);

  var vb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vb);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);    

  gl.bindBuffer(gl.ARRAY_BUFFER, vb);

  gl.enableVertexAttribArray(0);  
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);

  gl.enableVertexAttribArray(1);  
  gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 20, 12);  

  gl.uniform1i(gl.getUniformLocation(quadShader, 'su_tex'), 0)
  gl.activeTexture(gl.TEXTURE0 + 0);     
  gl.bindTexture(gl.TEXTURE_2D, tex);   

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4) 
  
  gl.enable(gl.DEPTH_TEST);
}

TeX被加载的方式如下

wallTex = loader.load("https://r105.threejsfundamentals.org/threejs/resources/images/wall.jpg");
drawQuad(1.0, wallTex);

- 21k

---

tex 是一个 THREE.Texture 对象，但不是使用 gl.createTexture() 创建的 WebGLTexture 对象。 - Rabbid76

谢谢，我花了5个小时终于搞定了。 - 21k

Answer 1

好的，我已经理解了。

无论如何，这可能对那些仍然困惑的人有所帮助（C++ OpenGL程序员）：

1. WebGlTexture是你使用glGenTextures(1, &texturId)创建的id，它用于渲染。

2. THREE.js.Texture是一个纹理容器，它包含从Web下载的纹理描述和图像数据，还具有一个隐藏属性__webglTexture，如果这个THREE.js.Texture从未用于渲染，则此属性为null。那么如果它已经被用于渲染呢？它将创建一个WebGLTexture（通过内部的glGenTextures(1, &textureId)），并将此WebGlTexture id分配给其__webglTexture，现在您可以用它来渲染。

在我看来，更合适的称呼可能是THREE.js.TextrureRes，这样会少引导人们产生误解。

- 21k