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

Question

我想在ThreeJS中使用场景的渲染结果作为纹理。ThreeJS有这样的功能吗？我需要修改ThreeJS吗？谢谢。

Answer 1

THREE.WebGLRenderTarget您可以通过将 a 传递给来将场景渲染到纹理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);

最后分两遍渲染场景：

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

您可能想要创建一个新场景和一个新相机以在renderTarget. 这取决于你想做什么。

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