如何在ThreeJS中使用场景的渲染结果作为纹理

Question

我想在ThreeJS中使用场景的渲染结果作为纹理。

ThreeJS有这样的功能吗？

Answer 1

您可以通过将

THREE.WebGLRenderTarget

传递到

THREE.WebGLRenderer.render()

将场景渲染到纹理。

首先，创建所需大小的渲染目标（这是您的纹理）：

var renderer = new THREE.WebGLRenderer();
var renderTarget = new THREE.WebGLRenderTarget(512, 512);

然后您可以在材质上使用

THREE.WebGLRenderTarget.texture

:

var geometry = new THREE.PlaneGeometry(1.0, 1.0);
var material = new THREE.MeshBasicMaterial({
    map: renderTarget.texture
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

最终通过 2 遍渲染场景：

renderer.render(fakeScene, fakeCamera, renderTarget);
renderer.render(scene, camera);

您可能想要创建一个新场景和一个新相机以在

renderTarget

上渲染。这取决于你想做什么。

看看这个小提琴和这个例子。