JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<body onLoad="init()"></body>

CSS

body {
    font-family: Monospace;
    background-color: #a8ddf8;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var controls, scene, camera, box, spline, counter = 0;

var tangent = new THREE.Vector3();
var axis = new THREE.Vector3();
var up = new THREE.Vector3(0, 1, 0);

var customUVGenerator = {
		generateTopUV: function ( geometry, vertices, indexA, indexB, indexC ) {
    	
			//return this.generateSideWallUV( geometry, vertices, indexA, indexB, indexC, 1000);
			var a_x = vertices[ indexA * 3 ];
			var a_y = vertices[ indexA * 3 + 1 ];
			var b_x = vertices[ indexB * 3 ];
			var b_y = vertices[ indexB * 3 + 1 ];
			var c_x = vertices[ indexC * 3 ];
			var c_y = vertices[ indexC * 3 + 1 ];

			return [
				new THREE.Vector2( a_x, a_y ),
				new THREE.Vector2( b_x, b_y ),
				new THREE.Vector2( c_x, c_y )
			];

		},

		generateSideWallUV: function ( geometry, vertices, indexA, indexB, indexC, indexD ) {
			
			var a_x = vertices[ indexA * 3 ];
			var a_y = vertices[ indexA * 3 + 1 ];
			var a_z = vertices[ indexA * 3 + 2 ];
			var b_x = vertices[ indexB * 3 ];
			var b_y = vertices[ indexB * 3 + 1 ];
			var b_z = vertices[ indexB * 3 + 2 ];
			var c_x = vertices[ indexC * 3 ];
			var c_y = vertices[ indexC * 3 + 1 ];
			var c_z = vertices[ indexC * 3 + 2 ];
			var d_x = vertices[ indexD * 3 ];
			var d_y = vertices[ indexD * 3 + 1 ];
			var d_z = vertices[ indexD * 3 + 2 ];

			if ( Math.abs( a_y - b_y ) < 0.01 ) {

				return [
					new THREE.Vector2( a_x, 1 - a_z ),
					new THREE.Vector2( b_x, 1 - b_z ),
					new THREE.Vector2( c_x, 1 - c_z ),
					new THREE.Vector2( d_x, 1 - d_z )
				];

			} else {

				return [
					new THREE.Vector2( a_y, 1 - a_z ),
					new THREE.Vector2( b_y, 1 - b_z ),
					new THREE.Vector2( c_y, 1 - c_z ),
					new THREE.Vector2( d_y, 1 - d_z )
				];

			}

		}
	};


function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
   ...