问THREE.js:从THREE.WebGLRenderTarget获取数据

EN

WebGLRenderer.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )

// allocate RGBA array

let pixels = new Uint8Array(_floor_width * _floor_height * 4);

let can = document.createElement("canvas"), ctx, ctxData, color;

// _floor_target is instance of THREE.WebGLRenderTarget of dimension _floor_width x _floor_height and _renderer is THREE.WebGLRenderer

_renderer.readRenderTargetPixels(_floor_target, 0, 0, _floor_width, _floor_height, pixels);

can.width = _floor_width;
can.height = _floor_height;

ctx = can.getContext('2d');
ctxData = ctx.getImageData(0, 0, can.width, can.height);

for (var fy = 0; fy < _floor_height; fy++) {
    for (var fx = 0; fx < _floor_width; fx++) {

        // retrieve exact rendered pixel

        color = [
            pixels[fy * _floor_width * 4 + fx * 4 + 0],
            pixels[fy * _floor_width * 4 + fx * 4 + 1],
            pixels[fy * _floor_width * 4 + fx * 4 + 2],
            pixels[fy * _floor_width * 4 + fx * 4 + 3]
        ];

        // put pixel to canvas image data (this whole thing might be done much faster)

        ctxData.data[(fy * can.width * 4) + (fx * 4) + 0] = color[0];
        ctxData.data[(fy * can.width * 4) + (fx * 4) + 1] = color[1];
        ctxData.data[(fy * can.width * 4) + (fx * 4) + 2] = color[2];
        ctxData.data[(fy * can.width * 4) + (fx * 4) + 3] = color[3];
        
    }
}

// update canvas image data

ctx.putImageData(ctxData, 0, 0);

document.body.appendChild(can);