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
 */

var 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 = {
    bg: new THREE.Color('hsl(0, 0%, 100%)'),
    greyscale: [
      new THREE.Color('hsl(0, 0%, 0%)'),
      new THREE.Color('hsl(0, 0%, 25%)'),
      new THREE.Color('hsl(0, 0%, 60%)'),
      new THREE.Color('hsl(0, 0%, 100%)'),
    ]
  };

  /**
   * 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.greyscale[0],
      transparent: true,
      opacity: 0.05,
      wireframe: true
    }),
    wireframe_dark: new THREE.MeshBasicMaterial({
      color: this.COLORS.greyscale[0],
      transparent: true,
      opacity: 0.5,
      wireframe: true
    }),
    grey: new THREE.MeshPhongMaterial({
      color: this.COLORS.greyscale[2],
      side: THREE.DoubleSide,
      transparent: false,
      opacity: 0.5,
      shading: THREE.FlatShading
    }),
    red: new THREE.MeshPhongMaterial({
      color: new THREE.Color(0xFF0000),
      side: THREE.DoubleSide,
      //shading: THREE.FlatShading
    })
  };

  /**
   * Objects
   * @type {Object}
   */
  this.objects = {
    incline: new THREE.Mesh(this.geometries.incline,...