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

CSS

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

JavaScript

/*

Resources
---------

rgb cube reference - http://i.imgur.com/fR6Tl0T.png
vertex colors - https://stemkoski.github.io/Three.js/Vertex-Colors.html
Isometric Projection using an Orthographic Camera - http://jsfiddle.net/q3m2kh5q/
good examples - https://stemkoski.github.io/Three.js/
cube with gradients - http://jsfiddle.net/FtML5/3/
rotating cube - http://jsfiddle.net/b45xk38d/1/
quad gradient - https://jsfiddle.net/eh3k7u93/

My first attempt - http://jsfiddle.net/9hhgmpL8/

*/

var pyramid, rgbCube, wireframe, 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 = new THREE.Scene();
	// 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( 5,5,5 );
  
  controls = new THREE.OrbitControls( camera );
  controls.target.set(5, 5, 5);
  controls.autoRotate = true;
	controls.minDistance = 10;
	controls.maxDistance = 50;

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

  rgbCube = RGBCube();
	rgbCube.position.set( 5, 5, 5 );
	scene.add(rgbCube);

	wireframe =  Wireframe();
	wireframe.position.set( 5, 5, 5 );
	scene.add(wireframe);

}

function render() {
	renderer.render(scene, camera);
}

function animate() {
	requestAnimationFrame(animate);
  controls.update();
	rgbCube.material.opacity = 0.5 + 0.5 * Math.sin(new Date().getTime() * .001);
	renderer.render(scene, camera);
}

function Wireframe () {
	var cubeGeometry = Cube();
	var geo = new THREE.EdgesGeometry( cubeGeometry ); 
	var mat = new THREE.LineBasicMaterial( { color: 0xffffff, transparent:true,opacity:0.2, linewidth: 1 } );
	var wireframe = new THREE.LineSegments( geo,...