JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
    <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>

CSS

body {
    background: gray;
}

JavaScript

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