Simulate an optically-inverted (mirror-image) camera in Three.js

问题

I have a Three.js scene containing various objects and some text. It is viewed by a single camera, camera_A whose output goes to a viewport_A in one part of my browser webpage.

Now I want a second camera (camera_B) to view the same scene and pass its output to a second viewport (viewport_B) on another part of the same webpage. Camera_B is the same as Camera_A in every respect except that the image it produces (in the second viewport_B) should be a mirror image of the image in (viewport_A).

I know how to set up different viewports on the same page and and create two identical cameras and send their outputs to the two viewports in a single renderer object (with two render operations).

But what is the best way to produce a mirror image in one of the viewports?

I have tried using the following command:-

camera.projectionMatrix.scale
     (new THREE.Vector3(-1, 1, 1));

But when I apply this command the resulting perspective of objects look wrong, see this jsfiddle example: http://jsfiddle.net/steveow/510h3nwv/2/

EDIT:

The answer by stdob does the job OK but requires using a second renderer

(My bad, I did not make clear the wish for a single renderer in original question).

Ideally I would just use one renderer and mirror the image in viewport_B.

回答1:

You can use post processing and custom shader:

THREE.MirrorShader = {

    uniforms: {
        "tDiffuse": { type: "t", value: null }
    },

    vertexShader: [
        "varying vec2 vUv;",
        "void main() {",
            "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join("\n"),

    fragmentShader: [
        "uniform sampler2D tDiffuse;",
        "varying vec2 vUv;",
        "void main() {",
            "vec2 mvUv = vec2(1.-vUv.x, 1.-vUv.y);", // Mirror
            "vec4 color = texture2D( tDiffuse, mvUv );",
            "gl_FragColor = color;",
        "}"
    ].join("\n")
};

http://jsfiddle.net/4jmaphjw/

来源：https://stackoverflow.com/questions/32417996/simulate-an-optically-inverted-mirror-image-camera-in-three-js

标签

javascript

three.js