JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.0.min.js"></script>
<script src="https://music-clindsey.c9.io/StereoEffect.js"></script>
<div id="container"></div>

CSS

body {
    margin: 0;
    overflow: hidden;
}

CoffeeScript

# three.js streoscopic effect
class MainView
    view: {
        eye: [0, 300, 1200]
    }

    config:
        fov: 45
        backgroundColor: new THREE.Color().setRGB 1, 1, 1
        aspectRatio: window.innerWidth / window.innerHeight
        near: 1
        far: 10000
        width: window.innerWidth
        height: window.innerHeight
        devicePixelRatio: window.devicePixelRatio
        camera:
            up:
                x: 0
                y: 1
                z: 0

    constructor: ->
        @container = document.getElementById 'container'
        @scene = new THREE.Scene
        @createView()
        @createLight()
        @createShapes()
        @createRenderer()
        @createStereoEffect()

    createView: ->
        {fov, aspectRatio, near, far, camera} = @config
        {up} = camera
        camera = new THREE.PerspectiveCamera fov, aspectRatio, near, far
        camera.position.x = @view.eye[0]
        camera.position.y = @view.eye[1]
        camera.position.z = @view.eye[2]
        camera.up.x = up.x
        camera.up.y = up.y
        camera.up.z = up.z
        @view.camera = camera

    createLight: ->
        light = new THREE.DirectionalLight 0xffffff
        light.position.set 0, 0, 1
        @scene.add light

    createShapes: ->
        group = new THREE.Group
        @createShadowFactory()
        @createShapeFactory()
        @createShape1 group
        @createShape2 group
        @createShape3 group
        @scene.add group
        @group = group

    createShadowFactory: ->
        @shadowFactory = new ShadowFactory

    createShapeFactory: ->
        @shapeFactory = new ShapeFactory
    
    createShape1: (group) ->
        x = 0
        z = 0
        shape = @shapeFactory.createShape (y, radius) -> [(y / radius + 1) / 2, 1, 0.5]
        shape.position.x = x
        shape.position.z = z
        shape.rotation.x = -1.87
        shadowMesh = @shadowFactory.createMesh()
        shadowMesh.position.x = x
       ...