JSFiddle - React, Tailwind, and code Playground
HTML
<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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
CSS
html, body, canvas {
margin: 0px;
overflow: hidden;
}
CoffeeScript
scene = null
outline = null
outScene = null
light = null
renderer = null
camera = null
plane = null
torusKnot = null
torusKnotOutline = null
screenWidth = window.innerWidth
screenHeight = window.innerHeight
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
antialias: true
renderer.setSize screenWidth, screenHeight
renderer.setClearColor 0x666666
renderer.autoClear = false
document.body.appendChild renderer.domElement
setModel = ->
# PLANE
geo1 = new THREE.PlaneGeometry 500, 500
mat1 = new THREE.MeshPhongMaterial({color: 0x00ff00, transparent: true, opacity: 0.5})
plane = new THREE.Mesh geo1, mat1
plane.position.z = -100
scene.add plane
# SHADED MODEL
torusKnotGeo = new THREE.TorusKnotGeometry 33, 10, 128, 161
phongMat2 = new THREE.MeshPhongMaterial 0xffffff
torusKnot = new THREE.Mesh torusKnotGeo, phongMat2
torusKnot.renderOrder=222
scene.add torusKnot
# SHADED MODEL 2
torusKnotGeo2 = new THREE.TorusKnotGeometry 50, 10, 128, 16
phongMat22 = new THREE.MeshPhongMaterial 0xffffff
torusKnot2 = new THREE.Mesh torusKnotGeo2, phongMat22
...