double-sided texture

by jmchen

HTML

<div id="info">Two-sided Texture</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script id="myVertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        vUv = uv;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying vec2 vUv;
    uniform sampler2D fronttex;
    uniform sampler2D backtex;

    void main() {
        vec3 color;

        if (gl_FrontFacing) {
            color = texture2D(fronttex, vUv).rgb;
        } else {
            vec2 backUv = vec2 (1.0-vUv.s, vUv.t);
            color = texture2D(backtex, backUv).rgb;
        }
        gl_FragColor = vec4(color, 1.0);
    }
</script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, controls;

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 100;
    scene.add(camera);

    geometry = new THREE.PlaneGeometry(100, 40);

    THREE.ImageUtils.crossOrigin = '';
    var frontK = THREE.ImageUtils.loadTexture('http://i.imgur.com/UDas19Q.png');
    var backK = THREE.ImageUtils.loadTexture('http://i.imgur.com/fe5C2iP.png');

    var shaderMaterial = new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        uniforms: {
            fronttex: {
                type: 't',
                value: frontK
            },
            backtex: {
                type: 't',
                value: backK
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });


    mesh = new THREE.Mesh(geometry, shaderMaterial);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    document.body.appendChild(renderer.domElement);
}

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}