如何获取场景的像素数据而不实际在 Three.js 中将其渲染到画布上？

Question

我想知道如果我要正常渲染场景，但实际上还没有在画布上渲染它们，我是否基本上可以获得将在画布上渲染的像素（作为数组缓冲区） 。如果是这样，怎么办？

我真的没有任何代码可以做类似的事情，因为我不知道它是否可能。（而且我对 Three.js 还很陌生）

Answer 1

几乎是的：您可以将场景渲染为THREE.WebGLRenderTarget并用于renderer.readRenderTargetPixels()访问渲染的数据。我知道的唯一区别是它没有抗锯齿功能。

所以像这样：

const rt = new THREE.WebGLRenderTarget(rendererWidth, rendererHeight);
renderer.render(scene, camera, rt);

// w/h: width/height of the region to read
// x/y: bottom-left corner of that region
const buffer = new Uint8Array(w * h * 4);
renderer.readRenderTargetPixels(rt, x, y, w, h, buffer);

现在，如果您只想渲染您感兴趣的屏幕的一小部分，可以使用scissor-testing：

renderer.setScissor(x, y, w, h);
renderer.setScissorTest(true);

renderer.render(scene, camera, rt);

renderer.setScissor(0, 0, rendererWidth, rendererHeight);
renderer.setScissorTest(false);