JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script type="x-shader/x-vertex" id="vertexshader">

			attribute vec2 customUV;

			varying vec2 vCustomUV;

			void main() {

				vCustomUV = customUV;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1 );

			}

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D customTexture;

			varying vec2 vCustomUV;

			void main() {

				gl_FragColor = vec4( vCustomUV, 0, 1 );
        
        // UNCOMMENT THIS, it goes black
				//gl_FragColor = texture2D( customTexture, vCustomUV );

			}

</script>

CSS

body {
	  margin: 0;
}

JavaScript

var renderer, scene, camera;

new THREE.TextureLoader().load( "//cdn.rawgit.com/mrdoob/three.js/master/examples/textures/colors.png", function( texture ) {

  camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.z = 400;

  scene = new THREE.Scene();
  //			scene.background = new THREE.Color( 0x050505 );
  scene.background = new THREE.Color( 0xA0A0A0 );

  var uniforms = {

    customTexture: texture

  };

  var shaderMaterial = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexshader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
    linewidth: 3
  } );

  var segments = 200;

  var positions = [];
  var uvs = [];

  for ( var i = 0; i < segments; i ++ ) {

    var u = i / ( segments - 1 );

    var p = u * 5 * 2 * Math.PI;
    var r = 50 * ( 0.7 * u + 0.3 );

    var x = Math.cos( p ) * r;
    var y = Math.sin( p ) * r;
    var z = 0;

    // positions

    positions.push( x, y, z ) ;

    uvs.push( u, 0.1 );

  }

  var geometry = new THREE.BufferGeometry();
  geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
  geometry.addAttribute( 'customUV', new THREE.Float32BufferAttribute( uvs, 2 ) );

  var object = new THREE.Line( geometry, shaderMaterial );
  scene.add( object );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );

  var container = document.getElementById( 'container' );
  document.body.appendChild( renderer.domElement );

  //

  window.addEventListener( 'resize', onWindowResize, false );


  animate();

} );

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

 ...