Question

我试图将img添加到3d webgl canvas应用程序的背景中但由于某种原因它无法正常工作，我错过了什么？我想我已经完成了所有必需的初始化步骤。

    initBkgnd();
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    tick();


function tick() {
    requestAnimFrame(tick);
    drawScene();
    initBkgnd();
    animate();
}

function initBkgnd() {
    backTex = gl.createTexture();
    backTex.Img = new Image();
    backTex.Img.onload = function() {
        handleBkTex(backTex);
    }
    backTex.Img.src = "textures/stars.jpg";
}

function handleBkTex(tex) {
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tex.Img);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

Answer 1

好的，我明白了。这是答案，改变：

initBkgnd();
gl.clearColor(0.0, 0.0, 0.0, 1.0);

到

gl.clearColor(0.0, 0.0, 0.0, 0.0);
initBkgnd();

并添加到canvas element sytle：

<canvas id="myCanvas" style="background: url('textures/stars.jpg')" width="1400" height="800"></canvas>

画布webgl的背景img

1 个答案: