JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<body>
    <!-- three.js container -->
    To get round CORS resource sharing, you'll have to download this image and then select it using the browse button - <a href="http://helloluxx.com/wp-content/uploads/2013/06/UV_Grid_Sm.jpg" target="_blank">click to open image in new tab</a>
    <input id="userImage" type="file" />
    <div id="container"></div>
    <script type="x-shader/x-vertex" id="vertexShader">
		varying vec4 textureCoord;
		varying vec3 sharedColor;
		attribute vec3 circleColor;

        void main()
        {
        	sharedColor = circleColor;
            textureCoord = vec4(uv, 0.0, 1.0);
            if(uv.y != 0.0)
            {
                textureCoord.w *= (uv.y);
            }

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }

	</script>

	<script type="x-shader/x-vertex" id="fragmentShader">
		uniform sampler2D fontTexture;
        varying vec4 textureCoord;
        varying vec3 sharedColor;
        void main()
        {
            gl_FragColor  = vec4(sharedColor, 1) * texture2D(fontTexture, vec2(textureCoord.x/textureCoord.w, textureCoord.y/textureCoord.w));
        }
	</script>

</body>

JavaScript

// three code begins here    
console.log(THREE)
var container, 
    renderer, 
    scene, 
    camera, 
    geo,
    planeMesh, 
    texture,
    fov = 90;

function init() {
    
    // grab the container from the DOM
    container = document.getElementById('container');
    
    // create a scene
    scene = new THREE.Scene();
    
    // create a camera the size of the browser window
    // and place it 100 units away, looking towards the center of the scene
    camera = new THREE.PerspectiveCamera( 
        fov, 
        window.innerWidth / window.innerHeight, 
        1, 
        500000 );
    camera.position.z = 1000;
    scene.add( camera );
     
    geo = new THREE.Geometry();
    
    //Now create custom shader parts
    customUniforms = {
        fontTexture: { type: "t", value: texture }
    };
    customAttributes = {
        circleColor: { type: "c", value: [] }
    };
    
    var customMaterial = new THREE.ShaderMaterial({
        attributes: customAttributes,
        uniforms: customUniforms,
        vertexShader:   document.getElementById( 'vertexShader').textContent,
        fragmentShader: document.getElementById( 'fragmentShader').textContent,
        vertexColors: THREE.VertexColors
    });
   
    
    var x = 0;
    var y = 0;
    var size = 1024;
    var halfWidth = size/2;
    
    var i = 0;
    
    geo.vertices.push(new THREE.Vector3(x-halfWidth, y+halfWidth, 0));		// TL
    geo.vertices.push(new THREE.Vector3(x-halfWidth, y-halfWidth, 0)); 		// BL
    geo.vertices.push(new THREE.Vector3(x+halfWidth, y-halfWidth, 0));		// BR
    geo.vertices.push(new THREE.Vector3(x+halfWidth, y+halfWidth, 0));		// TR
    
    // create two triangle faces for geom
    // all face coordinates must match vertice indexs
    var j = i*4;
    geo.faces.push(new THREE.Face3(
        j,								// TL
        j+1,							// BL
        j+3 							// TR
    ));
    geo.faces.push(new THREE.Face3(
        j+1,							// BL
        j+2,							// BR
        j+3...