JSFiddle - React, Tailwind, and code Playground

by Eskel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
<script src="http://eskel.cz/js/three/ShaderPass.js"></script>
<script src="http://eskel.cz/js/three/RenderPass.js"></script>
<script src="http://eskel.cz/js/three/MaskPass.js"></script>
<script src="http://eskel.cz/js/three/EffectComposer.js"></script>
<script src="http://eskel.cz/js/three/CopyShader.js"></script>
<script src="http://eskel.cz/js/three/AdditiveBlendShader.js"></script>
<body>
	<span id='fps'></span>
</body>

CSS

html, body, canvas {
    margin: 0px;
    overflow: hidden;
}
#fps {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    z-index: 50;
}

JavaScript

var animate, camera, clock, composer, elapsedTime, frameCount, init, light, loadModel, maskScene, mesh1, mesh2, mesh3, onWindowResize, outScene, render, renderTarget, renderer, scene, screenHeight, screenWidth, setModel, shader, updateFps;

scene = null;
outScene = null;
maskScene = null;
light = null;
renderer = null;
composer = null;
camera = null;
mesh1 = null;
mesh2 = null;
mesh3 = null;
renderTarget = null;

screenWidth = window.innerWidth;
screenHeight = window.innerHeight;

clock = new THREE.Clock();
elapsedTime = 0;
frameCount = 0;

shader = {
    'outline': {
        vertex_shader: ["uniform float offset;", "void main() {", "vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );", "gl_Position = projectionMatrix * pos;", "}"].join("\n"),
        fragment_shader: ["void main(){", "gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );", "}"].join("\n")
    }
};

init = function() {
    var clearMask, copyPass, mask, normal, outline, renderTargetParameters;
    scene = new THREE.Scene();
    maskScene = new THREE.Scene();
    outScene = new THREE.Scene();
    setModel();

    camera = new THREE.PerspectiveCamera(40, screenWidth / screenHeight, 50, 10000);
    camera.position.set(0, 0, 400);
    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(1, 1, 1);
    scene.add(light);

    renderer = new THREE.WebGLRenderer({
        width: screenWidth,
        height: screenHeight,
        antialias: true
    });

    renderer.setSize(screenWidth, screenHeight);
    renderer.setClearColor(0x666666);
    renderer.autoClear = false;
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    document.body.appendChild(renderer.domElement);
    renderTargetParameters = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: true
    };
    renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters);
    composer =...