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="3d_scene"></div>

</body>
</html>

JavaScript

// jsHint
/*global window */
/*global THREE */

// 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 App = {};

App = function(sceneContainerName) {
    this.sceneContainerName = sceneContainerName;

    this.SCREEN_WIDTH = window.innerWidth;
    this.SCREEN_HEIGHT = window.innerHeight;

    this.MAX_X = this.SCREEN_WIDTH / 2;
    this.MIN_X = 0 - (this.SCREEN_WIDTH / 2);
    this.MAX_Y = this.SCREEN_HEIGHT / 2;
    this.MIN_Y = 0 - (this.SCREEN_HEIGHT / 2);

    this.NUM_HORIZONTAL_LINES = 50;

    this.init();
};

App.prototype = {
    init: function() {
        // 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 = new THREE.Projector();

        // init renderer
        this.renderer = new THREE.CanvasRenderer();
        // start the renderer
        this.renderer.setSize(this.SCREEN_WIDTH, this.SCREEN_HEIGHT);

        this.drawGrid(this.NUM_HORIZONTAL_LINES);

        this.trackball = new THREE.TrackballControls(this.camera, this.renderer.domElement);
        this.trackball.staticMoving = true;

        var me = this;

        this.trackball.addEventListener('change', function() {
            me.render();

        });

        // attach the render-supplied DOM element
        var container = document.getElementById(this.sceneContainerName);
       ...