Check out this JSFiddle example
In my project, I have a single scene with two cameras. Each camera is assigned to its viewport, and both viewports are placed side by side on the same renderer object.
My goal is to have the second camera display a mirrored image of the scene.
Below is the rendering code snippet:
function render() {
//... clear entire renderer
renderer.setViewport(0, 0, renderer_width, renderer_height);
renderer.clear();
//... 1st viewport (left)
renderer.setViewport(0, 0, renderer_width * 0.5, renderer_height);
renderer.render(scene, camera1);
renderer.clearDepth(); //... no effect due to no viewport overlap
//... 2nd viewport (right)
renderer.setViewport(renderer_width * 0.5, 0, renderer_width * 0.5, renderer_height);
renderer.render(scene, camera2);
}
To achieve the mirror reflection effect for the second camera, I use the following code:
camera2.projectionMatrix.scale(new THREE.Vector3(-1, 1, 1));
camera2.updateProjectionMatrix();
However, as demonstrated in the JSFiddle example (click the button "Invert Camera2 (VP2)"), the static cube appears inverted, seemingly viewed from the inside.
It's worth noting that both viewports need to be on the same renderer. An alternate solution using multiple renderers was suggested in the response by /u/stdob--/ on Stack Overflow.
EDIT 20160622
I've shared an answer with a JSFiddle that combines rendering approaches from Lee Stemkoski and West Langley.