JSFiddle - React, Tailwind, and code Playground
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
maskScene = null
light = null
renderer = null
composer = null
camera1 = null
camera2 = null
camera3 = 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
maskScene = new THREE.Scene
outScene = new THREE.Scene
setModel()
# SCENE CAMERA
camera1 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
camera1.position.set 0, 0, 400
scene.add camera1
camera2 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
camera2.position.set 0, 0, 400
outScene.add camera2
camera3 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
camera3.position.set 0, 0, 400
maskScene.add camera3
# 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
# POSTPROCESSING
renderTargetParameters =
...