How to Switch Between Stereograph and Perspective Cameras in ThreeJS

Screen capture of interactive example showing stereo/perspective camera switching.Documentation and examples for are complete. There are a lot of contributors who are always adding material. In the world of simple-VR, there is the StereoEffects for rendering. This is an effects that renders the scene into left/right eye split-screen. This is generally how to do it for Cardboard and other not-quite fully-immersive VR systems. These are also the systems that have a huge market share because of their minimal entry price point. There are a number of tutorials that explain how to create the split-screen effect - for example this one from SitePoint. The basic idea is to create an effect on the WebGL renderer that does the split screen calculations.

What I could not find is an example of how to remove that split screen effect. Just simply swapping out the stereo effects renderer for a regular renderer does not work. All that happens is the entire scene is rendered in the right-half of the display. The process of creating the left/right eye and split screen changes data structures in WebGL. It is necessary to undo the split screen in addition to removing the stereo effect.

It turns out that only four lines of JavaScript are needed to do this

renderer.setScissorTest( false );
var size = renderer.getSize();
renderer.setScissor( 0, 0, size.width, size.height );
renderer.setViewport( 0, 0, size.width, size.height );

where renderer is the WebGLRenderer object.

This capability is built into XSeen so the only requirement is to change the scene viewing camera. The XSeen capability with interactive demo is described in the post "Scene Camera Features - Update to 0.7".