JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<script src="http://stemkoski.github.com/Three.js/js/Detector.js"></script>
<script src="http://stemkoski.github.com/Three.js/js/Stats.js"></script>
<script src="http://stemkoski.github.com/Three.js/js/THREEx.KeyboardState.js"></script>
<script src="http://stemkoski.github.com/Three.js/js/THREEx.FullScreen.js"></script>
<script src="http://stemkoski.github.com/Three.js/js/THREEx.WindowResize.js"></script>

JavaScript

/*     Three.js  */

// MAIN
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var cube;

init();
animate();

// FUNCTIONS         
function init() 
{
    // SCENE
    scene = new THREE.Scene();
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);    
    // RENDERER
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    container.appendChild( renderer.domElement );
    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
    // CONTROLS
    controls = new THREE.TrackballControls( camera );
    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
    ////////////
    // CUSTOM //
    ////////////
    // Sphere parameters: radius, segments along width, segments along height
    var sphereGeom =  new THREE.SphereGeometry( 50, 32, 16 );
    var largeSphereGeom =  new THREE.SphereGeometry( 51, 32, 16 );
    
    // Basic wireframe materials.
    var darkMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ); 
    var multiMaterial = [ darkMaterial, wireframeMaterial ]; 
        
    // Creating...