Question

我在编码中使用了three.js库，我想在场景中放置一个透明的洞。该孔本身就是3d对象，因此将渲染其前面的对象，但不会渲染其后面的对象。

我已经尝试将3d“孔”材料设置为基本材料，因此我可以读取像素数据，并根据此数据将某些像素设置为透明。但是，一旦我检索到画布上下文，该程序就会停止工作。

我的问题是我如何在three.js画布上读写像素数据，或者如果可能的话，three.js库是否已有实现此目的的方法？

// EDIT //

我找到了一种使用renderer.context和其他代码读取three.js画布上的像素数据的方法。现在我的新问题是如何更改three.js或webgl中的单个像素的颜色

// EDIT //

我现在可以读取像素数据并对其进行更改，然后使用DataTexture方法将其放入THREE.js纹理中。但是现在，每当我将该纹理应用于平面时，该平面就会返回白色。

var texture = new THREE.Texture();
function SetTransparent(){
    var pixels = new Uint8Array(window.innerWidth*window.innerHeight*4);
    gl.readPixels(0, 0, window.innerWidth, window.innerHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    var length = pixels.length/4;
    /*for (var i = 0; i < length; i++) {
        if (pixels[i*4] === 0 && pixels[i*4+1] === 0 && pixels[i*4+2] === 0 && pixels[i*4+3] === 255){
            pixels[i*4+3] = 0;
        }
    }*/
    var editTex = new THREE.DataTexture(pixels, window.innerWidth, window.innerHeight, THREE.RGBAFormat, THREE.UnsignedByteType);
    texture = editTex;
    texture.needsUpdate = true;
}

Answer 1

最终解决了我的问题。我用webglcontex.readpixels(parameters);读取了所有像素数据。然后，我获取了这些数据并根据颜色对其进行了处理，然后将其放入2d画布中。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var SetCanvas = function(data){
    var w = window.innerWidth;
    var h = window.innerHeight;
    Array.from({length: h}, (val, i) => data.slice(i * w * 4, (i + 1) * w * 4))
        .forEach((val, i) => data.set(val, (h - i - 1) * w * 4));
    var id = ctx.createImageData(window.innerWidth, window.innerHeight);
    id.data.set(data);
    ctx.putImageData(id, 0, 0);
};

绿屏three.js渲染输出

1 个答案: