如何获取场景的像素数据而不在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);