JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>
</head>
<body>
    <div id="well_view_3d_scene"></div>

</body>
</html>

JavaScript

// requestAnim shim layer by Paul Irish
 window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                 window.setTimeout(callback, 1000 / 60);
              };
 })();

var kapsule = {};


/** @file kapsule.threeD.js
//  3D function
//  @author CS.Brandt
//  @date 06/03/2012 
*/

// jsHint
/*global THREE */


kapsule.threeD = function(sceneContainerName)
{
    "use strict";
   this.sceneContainerName = sceneContainerName;
   var sceneElement = document.getElementById(this.sceneContainerName);
   
   this.SCREEN_WIDTH       = sceneElement.offsetWidth;
   this.SCREEN_HEIGHT      = sceneElement.offsetHeight;
   
   this.MAX_X = this.SCREEN_WIDTH / 2;
   this.MIN_X = 0 - (this.SCREEN_HEIGHT / 2);
   this.MAX_Y = this.SCREEN_HEIGHT / 2;
   this.MIN_Y = 0 - (this.SCREEN_HEIGHT / 2);
   
   this.GRID_SIZE          = 1000;
   this.NUM_HORIZONTAL_LINES = 50;

   this.init();
   
   this.UI = new kapsule.threeD.UI();
};

kapsule.threeD.UI = function()
{
    "use strict";
    this.radious = 1600;
    this.theta = 45;
    this.phi   = 60;

    this.isMouseDown = false;
    this.mouseDownPosition = {};
    
    this.init();
};

kapsule.threeD.prototype = 
{
    init:function()
   {
        "use strict";
        // init scene
        this.scene = new THREE.Scene();
        
        // init camera
        // View Angle, Aspect, Near, Far
        this.camera = new THREE.PerspectiveCamera(45, this.SCREEN_WIDTH / this.SCREEN_HEIGHT, 1, 10000);
        // set camera position
        this.camera.position.z = 1000;
        this.camera.position.y = 0;

        // add the camera to the scene
        this.scene.add(this.camera);
        
        this.projector =...