JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Isometric Projection using an Orthographic Camera
// useful:
// cube with gradients http://jsfiddle.net/FtML5/3/
// rotating cube http://jsfiddle.net/b45xk38d/1/
// quad gradient https://jsfiddle.net/eh3k7u93/
// rgb cube definition https://www.researchgate.net/profile/Zaher_Aghbari/publication/223162168/figure/fig5/AS:305176415096858@1449771135873/Fig-6-The-eight-corners-of-RGB-cube.png
// previous complex method
// http://jsfiddle.net/9hhgmpL8/
// simpler method modified from
// https://stemkoski.github.io/Three.js/Vertex-Colors.html
// great examples
// https://stemkoski.github.io/Three.js/
var cube, pyramid, renderer, scene, camera;

var width = 500;
var height = 500;

init();
render();
animate();

function init() {

	// renderer
	renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
	renderer.setSize(width, height);
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

  
	// axes
	scene.add( new THREE.AxisHelper( 20 ) );

	// camera
	var aspect = width / height;
	var d = 15;
	camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
	camera.position.set( d, d, d );
  camera.lookAt( scene.position );
	
  			// camera = new THREE.PerspectiveCamera(50, 1, 1, 1000 );
				// camera.position.y = 20;
				// camera.position.z = 20;

  
  
  controls = new THREE.OrbitControls( camera );
	controls.minDistance = 10;
	controls.maxDistance = 50;

  pyramid = coloredPyramid();
  pyramid.position.set(0, 0, 0);
	scene.add(pyramid);

  cube = Cube();
	cube.position.set( 5, 5, 5 );
	scene.add(cube);
  

}

function Cube () {

	var cubeMaterial = new THREE.MeshBasicMaterial({
  	color: 0xffffff,
    wireframe: true,
    vertexColors:  THREE.VertexColors
  });
	
	var color, face, numberOfSides, vertexIndex;
	
	// faces are indexed using characters
	var faceIndices = [ 'a', 'b', 'c', 'd' ];

	var size = 10;
	var point;
	var cubeGeometry = new THREE.CubeGeometry( size, size, size, 1, 1, 1 );

	for (...