How to use rendering result of scene as texture in ThreeJS

Question

I would like to use the rendering result of the scene as a texture in ThreeJS.

Does ThreeJS have such a function?

Answer 1

You can render a scene to a texture by passing a THREE.WebGLRenderTarget to THREE.WebGLRenderer.render().

First, create a render target of the desired size (this is your texture) :

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

You can then use THREE.WebGLRenderTarget.texture on a material :

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);

Finally render the scene in 2 passes :

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

You may want to create a new scene and a new camera to render on the renderTarget. It depends on what you want to do.

Take a look at this fiddle and this example.