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/OrbitControls.js"></script>

<img style="display:none" id="front" alt=""...

CSS

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

JavaScript

function draw_texture() {
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = 256;	
  var ctx = canvas.getContext('2d');
  ctx.drawImage(document.getElementById('front'), 0, 0);
  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;
  return texture;
}


THREE.ExtrudeGeometry.BoundingBoxUVGenerator = {

	generateTopUV: function( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC ) {
		var ax = geometry.vertices[ indexA ].x,
			ay = geometry.vertices[ indexA ].y,

			bx = geometry.vertices[ indexB ].x,
			by = geometry.vertices[ indexB ].y,

			cx = geometry.vertices[ indexC ].x,
			cy = geometry.vertices[ indexC ].y;

		var bb = extrudedShape.getBoundingBox();
		var bb_minX = bb.minX;
		var bb_minY = bb.minY;
		var bb_width = bb.maxX - bb_minX;
		var bb_height = bb.maxY - bb_minY;
		if (bb_width == 0) bb_width = 1;
        if (bb_height == 0) bb_height = 1;
        return [new THREE.Vector2( (ax - bb_minX) / bb_width,  (ay - bb_minY) / bb_height  ),
            new THREE.Vector2( (bx - bb_minX) / bb_width,  (by - bb_minY) / bb_height  ),
            new THREE.Vector2( (cx - bb_minX) / bb_width,  (cy - bb_minY) / bb_height  )
        ];

		return [
			new THREE.Vector2( ax, ay ),
			new THREE.Vector2( bx, by ),
			new THREE.Vector2( cx, cy )
		];
	},

	generateBottomUV: function( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC ) {

		return this.generateTopUV( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC );

	},

	generateSideWallUV: function( geometry, extrudedShape, wallContour, extrudeOptions,
	                              indexA, indexB, indexC, indexD, stepIndex, stepsLength,
	                              contourIndex1, contourIndex2 ) {

		var ax = geometry.vertices[ indexA ].x,
			ay = geometry.vertices[ indexA ].y,
			az = geometry.vertices[ indexA ].z,

			bx = geometry.vertices[ indexB ].x,
			by = geometry.vertices[ indexB ].y,
			bz = geometry.vertices[...