How to use camera as texture image in Three.js

Question

In three.js, I am trying to create a texture whose image is the current scene as viewed from a Camera. Using a CubeCamera to create a similar effect is well-documented; and with CubeCamera I have created an example of a scene to illustrate my goal at:

http://stemkoski.github.com/Three.js/Camera-Texture-Almost.html

However, I would like to use a regular Camera (rather than a CubeCamera) as the texture. How could I do this?

Answer 1

Ideally this would work.

Init:

renderTarget = new THREE.WebGLRenderTarget( 512, 512, { format: THREE.RGBFormat } );

var planelikeGeometry = new THREE.CubeGeometry( 400, 200, 200 );
var plane = new THREE.Mesh( planelikeGeometry, new THREE.MeshBasicMaterial( { map: renderTarget } ) );
plane.position.set(0,100,-500);
scene.add(plane);

Render:

renderer.render( scene, topCamera, renderTarget, true );
renderer.render( scene, topCamera );

And it almost does, but we have some unfinished business with y-flipped textures that ruins the party here.

So the best solution at the moment is to use the intermediry quad for flipping the texture (also saves a render):

http://mrdoob.github.com/three.js/examples/webgl_rtt.html

Answer 2

Based on mrdoob's example and suggestions, I have created a working example with very detailed comments, available at:

http://stemkoski.github.com/Three.js/Camera-Texture.html

part of my series of tutorial-style Three.js series of examples at

http://stemkoski.github.com/Three.js/