JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<div id="stage"></div>

CSS

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

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

JavaScript

/**
 * THREE.JS - CLUSTER
 */
console.clear();

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

/**
 * Core
 */
  var RENDERER,
      SCENE,
      CAMERA,
      COMPOSER,
      WIDTH  = 0,
      HEIGHT = 0,
      PIXEL_RATIO = window.devicePixelRatio || 1;

/**
 * Scene variables
 */
  
  /**
   * Colours
   * @type {Object}
   */
  var COLORS = {
  	bg: new THREE.Color('hsl(255, 0%, 0%)'),
    greyscale: [
      new THREE.Color('hsl(0, 0%, 0%)'),
      new THREE.Color('hsl(0, 0%, 25%)'),
      new THREE.Color('hsl(0, 0%, 50%)'),
      new THREE.Color('hsl(0, 0%, 100%)'),
    ]
  }
  
  /**
   * Geometries
   * @type {Object}
   */
  var geometries = {
    cluster_boundary: new THREE.SphereGeometry(300, 10, 10)
  }
  
  /**
   * Materials
   * @type {Object}
   */
  var materials = {
    wireframe: new THREE.MeshBasicMaterial({
      color: COLORS.greyscale[3],
      transparent: true,
      opacity: 0.1,
      wireframe: true
    })
  }
  
  /**
   * Objects
   * @type {Object}
   */
  var objects = {
  	cluster_boundary: new THREE.Mesh(geometries.cluster_boundary, materials.wireframe)
  }
  
  /**
   * Lights
   * @type {Object}
   */
  var lights = {
    ambient: new THREE.AmbientLight(COLORS.greyscale[1]),
  }
  
  /**
   * Misc objects
   * @type {Object}
   */
  var misc_objects = {
    fog: new THREE.FogExp2(COLORS.bg, 0.0015)
  }


///////////////
// Functions //
///////////////

  /**
   * Initialize scene
   */
  function init(){
    // Size
    WIDTH    = window.innerWidth;
    HEIGHT   = window.innerHeight;

    // Setup renderer
    RENDERER = new THREE.WebGLRenderer();
    SCENE    = new THREE.Scene();
    CAMERA   = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT , 0.1, 10000);
    var stage_elem = document.getElementById('stage');
    stage_elem.innerHTML = '';
    misc_objects.elem = stage_elem.appendChild(RENDERER.domElement);
    RENDERER.setClearColor(COLORS.bg, 1);
    RENDERER.setPixelRatio(PIXEL_RATIO);

    // Camera position
   ...