在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);

Answer 1

好了，我明白了。

无论如何，这可能会帮助那些仍然困惑的人(c++ opengl程序员):

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

2. THREE.js.Texture是一个纹理容器，它包含了纹理描述和图像数据下载从网络或其他，它有一个隐藏的属性__webglTexture是空的，如果这个THREE.js.Texture从未被用于渲染。那么，如果它被用于渲染呢?它将创建一个WebGLTexture(通过glGenTextures(1， &textureId)内部我猜)，并分配这个WebGlTexture id给它的__webglTexture，现在你可以使用它来渲染。

在我看来，把THREE.js.Texture称为THREE.js.TextrureRes可能更合适，更少误导。