stjobs_mirror_by_composer

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/MaskPass.js"></script>

JavaScript

//... Flip to mirror image by 
//... OLD (de)commenting line 22
//... In the render function uncomment the line  "//do_flip = true;"


var camera, scene, renderer, geometry, material, mybox, mybox2, composer;

THREE.MirrorShader = mirrorShader();

init();
animate();

function init() {

    scene = new THREE.Scene();

    //MR DOOB
    camera = new THREE.PerspectiveCamera
    (50, window.innerWidth / window.innerHeight, 1, 10000);
    
    camera.position.x = 100;
    camera.position.y = 140;
    camera.position.z = 500;
    
    //... Uncomment the following line to produce mirror image of scene.
    //camera.projectionMatrix.scale(new THREE.Vector3(-1, 1, 1));
    
    scene.add(camera);

    // BOX
    var myboxGeometry = new THREE.CubeGeometry(50, 50, 50);
    var myboxMaterial = new THREE.MeshLambertMaterial( {color: 0x00aaff, side: THREE.DoubleSide}  );
    
    
    var mybox2Geometry = new THREE.CubeGeometry(150, 150, 150);
    var mybox2Material = new THREE.MeshNormalMaterial();

    mybox = new THREE.Mesh(myboxGeometry, myboxMaterial);
    scene.add(mybox);
    
    mybox2 = new THREE.Mesh(mybox2Geometry, mybox2Material);
    scene.add(mybox2);
    mybox2.position.set(-100,-10,-300);

    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 200, 0);
    scene.add(light);
    
    //RENDERER
    renderer = new THREE.WebGLRenderer();
	renderer.setClearColor( 0xffffff );    
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

				composer = new THREE.EffectComposer( renderer );
				composer.addPass( new THREE.RenderPass( scene, camera ) );
				var effect = new THREE.ShaderPass( THREE.MirrorShader );
				effect.renderToScreen = true;    
				composer.addPass( effect );

}

function animate() {

    requestAnimationFrame(animate);
    render();
    update();
}

function update() 
{
    mybox.rotation.x += 0.01;
    mybox.rotation.y += 0.015;

}

function render() {

  ...