JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="stage"></div>

CSS

body{
  background: #fff;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

canvas{
  background: #fff;
  width: 600px;
  height: 600px;
  /*cursor: none;*/
}

Babel + JSX

/**
 * THREE.JS - Plane geometry X,Z -> Y level test
 */

let scene = function(){

  this.var_init();
  this.init();

  return this;

}

///////////////
// Variables //
///////////////

scene.prototype.var_init = function(){

  /**
   * Core
   */
  this.RENDERER    = null;
  this.SCENE       = null;
  this.CLOCK       = null;
  this.CAMERA      = null;
  this.CONTROLS    = null;
  this.COMPOSER    = null;
  this.WIDTH       = 0;
  this.HEIGHT      = 0;
  this.PIXEL_RATIO = window.devicePixelRatio || 1;
  this.GRAVITY     = 1.05;
  this.T_VELOCITY  = 10;
  this.RAYCASTER   = null;

  /**
   * Colours
   * @type {Object}
   */
  this.COLORS = {
  	purple: {
    	dark: new THREE.Color(0x4E3260),
    	mid: new THREE.Color(0x733F84),
    	light: new THREE.Color(0xA348BF),
    },
  	blue: {
    	dark: new THREE.Color(0x2C3075),
    	mid: new THREE.Color(0x424ED1),
    	light: new THREE.Color(0x749DF7),
    },
  	grey: {
    	dark: new THREE.Color(0x37343d),
    	mid: new THREE.Color(0x625e72),
    	light: new THREE.Color(0xcfccdd),
    },
    white: new THREE.Color(0xFFFFFF),
    black: new THREE.Color(0x000000),
  };

  /**
   * Geometries
   * @type {Object}
   */
  this.geometries = {
    incline: new THREE.PlaneGeometry(200, 200, 5, 5),
    boundary: new THREE.BoxGeometry(200, 200, 200),
    highlight: new THREE.SphereGeometry(10, 20, 20)
  };

  /**
   * Materials
   * @type {Object}
   */
  this.materials = {
    wireframe: new THREE.MeshBasicMaterial({
      color: this.COLORS.white,
      transparent: true,
      opacity: 0.1,
      wireframe: true
    }),
    wireframe_dark: new THREE.MeshBasicMaterial({
      color: this.COLORS.white,
      transparent: true,
      opacity: 0.5,
      wireframe: true
    }),
    grey: new THREE.MeshPhongMaterial({
      color: this.COLORS.grey.dark,
      side: THREE.DoubleSide,
      transparent: false,
      opacity: 0.5,
      shading: THREE.FlatShading
    }),
    highlight: new THREE.MeshPhongMaterial({
      color:...