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;
}
img {
	width: 128px;
	height: 128px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

JavaScript

// MatCap-style image rendered on a sphere
// modify sphere UVs instead of using a ShaderMaterial

var camera, scene, renderer;
var image;

init();
animate();

function init() {

	info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'Drag mouse to rotate camera; scroll to zoom';
	document.body.appendChild( info );

    renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 0, 0, 150 );
    scene.add( camera ); // since light is child of camera

	controls = new THREE.OrbitControls( camera );
	controls.minDistance = 75;
	controls.maxDistance = 200;
    controls.enablePan = false;

	scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
	
	var light = new THREE.PointLight( 0xffffff, 1 );
	camera.add( light );

    image = document.createElement( 'img' );
    document.body.appendChild( image );

    var texture = new THREE.Texture( image );
    image.addEventListener( 'load', function ( event ) { texture.needsUpdate = true; } );

	var material = new THREE.MeshPhongMaterial( {
		color: 0xffffff, 
		specular: 0x050505,
		shininess: 50,
		map: texture
	} );

	var geometry = new THREE.SphereGeometry( 30, 32, 16 );

    // modify UVs to accommodate MatCap texture
	var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
	for ( i = 0; i < faceVertexUvs.length; i ++ ) {

		var uvs = faceVertexUvs[ i ];
		var face = geometry.faces[ i ];

		for ( var j = 0; j < 3; j ++ ) {

			uvs[ j ].x = face.vertexNormals[ j ].x * 0.5 + 0.5;
			uvs[ j ].y =...