JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    font-family: Monospace;
    color: #fff;
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}
/*
parameters = {
 *
 *  size: 			<float>, 	// size of the text
 *  height: 		<float>, 	// thickness to extrude text
 *  curveSegments: 	<int>,		// number of points on the curves
 *  steps: 			<int>,		// number of points for z-side extrusions
 *
 *  font: 			<string>,		// font name
 *  weight: 		<string>,		// font weight (normal, bold)
 *  style: 			<string>,		// font style  (normal, italics)
 *
 *  bevelEnabled:	<bool>,			// turn on bevel
 *  bevelThickness: <float>, 		// how deep into text bevel goes
 *  bevelSize:		<float>, 		// how far from text outline is bevel
 *  bevelSegments:	<int>, 			// number of bevel layers
 *
 *  extrudePath:	<THREE.CurvePath>	// path to extrude shape along
 *  bendPath:		<THREE.CurvePath> 	// path to bend the geometry around
 *
 *  material:		 <THREE.Material>	// material for front and back faces
 *  extrudeMaterial: <THREE.Material>	// material for extrusion and beveled faces
 *
*/

JavaScript

var container,
info,
camera,
scene,
light,
geometry,
mesh,
projector,
renderer,
controls;

// dom
container = document.createElement('div');
document.body.appendChild(container);

// info
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = "drag to rotate camera";
container.appendChild(info);

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

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

// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 300, 500);
scene.add(camera);

// controls
controls = new THREE.OrbitControls(camera);

// light
scene.add(new THREE.AmbientLight(0x222222));

// light
light = new THREE.PointLight(0xaaaaaa);
light.position = camera.position;
scene.add(light);

var object = new THREE.Object3D();

var shape1 = new THREE.Shape();

shape1.moveTo(307.94, 275.49);
shape1.lineTo(296.26, 275.23);
shape1.lineTo(286.64, 272.99);
shape1.lineTo(279.78, 269.31);
shape1.lineTo(274.14, 263.55);
shape1.lineTo(271.65, 260.21);
shape1.lineTo(269.2, 261.06);
shape1.lineTo(254.83, 268.51);
shape1.lineTo(242.11, 272.97);
shape1.lineTo(227.59, 275.23);
shape1.lineTo(209.91, 275.48);
shape1.lineTo(197.47, 273.63);
shape1.lineTo(187.91, 270.13);
shape1.lineTo(180.48, 265.09);
shape1.lineTo(175.32, 258.88);
shape1.lineTo(172.2, 251.44);
shape1.lineTo(171.1, 242.23);
shape1.lineTo(172.24, 233.63);
shape1.lineTo(175.49, 226.24);
shape1.lineTo(181, 219.54);
shape1.lineTo(189.42, 213.3);
shape1.lineTo(201.36, 207.73);
shape1.lineTo(217.23, 203.25);
shape1.lineTo(238.28, 200.1);
shape1.lineTo(269.37, 198.47);
shape1.lineTo(269.98, 182.93);
shape1.lineTo(268.74, 171.32);
shape1.lineTo(266.05, 163.7);
shape1.lineTo(261.58, 157.72);
shape1.lineTo(255.24, 153.24);
shape1.lineTo(247.06,...