Three.js绘制交错顶点四边形报错：'tex'不是WebGLTexture

我尝试在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);
}

纹理加载代码：

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

• 纹理加载未完成就传入底层API
  Three.js的loader.load()是异步方法，调用后立刻返回的THREE.Texture对象只是一个空壳，内部的原生WebGLTexture还没初始化完成。直接把这个对象传给gl.bindTexture()，自然会因为不是有效WebGLTexture实例而报错。

• 混淆了Three.js纹理与原生WebGLTexture
  你传入的是Three.js封装的THREE.Texture对象，但gl.bindTexture()需要的是原生WebGLTexture实例——它存储在Three.js纹理对象的webGLTexture属性里，但这个属性只有在纹理加载完成后才会有值。

正确修改方式 #

方式1：等待纹理加载完成再调用绘制 #

修改加载代码，利用回调确保纹理就绪：

wallTex = loader.load(
  "https://r105.threejsfundamentals.org/threejs/resources/images/wall.jpg",
  (texture) => {
    // 加载完成后传入原生WebGLTexture
    drawQuad(1.0, texture.webGLTexture);
  }
);

方式2：用Three.js原生组件绘制（更推荐） #

既然用了Three.js，没必要直接操作底层WebGL，用官方组件更简洁：

// 创建平面几何体与材质
const planeGeo = new THREE.PlaneBufferGeometry(2, 2);
const planeMat = new THREE.MeshBasicMaterial({ map: wallTex });
const quad = new THREE.Mesh(planeGeo, planeMat);
quad.position.z = 1.0;
scene.add(quad);

// 渲染循环
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

内容的提问来源于stack exchange，提问作者21k