JSFiddle - React, Tailwind, and code Playground

by Eskel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script src="//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;
}

CoffeeScript

scene       = null
normal      = null
outline     = null
outScene    = 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 = () ->

    # SCENE

    scene     = new THREE.Scene
    outScene  = new THREE.Scene
    setModel()

    # CAMERA

    camera = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
    camera.position.set 0, 0, 400

    # LIGHTS

    light = new THREE.DirectionalLight 0xffffff
    light.position.set 1, 1, 1
    scene.add light

    # RENDERER

    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

    # EVENTS

    window.addEventListener 'resize', onWindowResize, false

setModel = ->

    geometry = new THREE.TorusKnotGeometry 50, 10, 128, 16

    # shaded model
    matColor = new THREE.MeshPhongMaterial 0xffffff
    mesh1 = new THREE.Mesh geometry, matColor
    scene.add mesh1

    # shader
    uniforms = offset:
        type: "f"
        value: 1

    outShader = shader['outline']
    
    matShader = new THREE.ShaderMaterial
        uniforms: uniforms,
 ...