JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.js">
</script>
<script type="x-shader/x-vertex" id="vertexShader">
  #if NUM_DIR_LIGHTS > 0
  struct DirectionalLight {
     vec3 direction;
     vec3 color;
     int shadow;
     float shadowBias;
     float shadowRadius;
     vec2 shadowMapSize;
     };
     uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
  #endif
  varying vec3 color;
  void main() {
     float r = directionalLights[0].color.r;
     color = vec3(r,1.0,0.0);
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
  varying vec3 color;
  void main() {
     gl_FragColor = vec4(color,1.0);
  }
</script>

CSS

body {
   margin: 0;
 }

JavaScript

//
  // Scene
  //
  var scene = new THREE.Scene();

  var light = new THREE.DirectionalLight(0xff0000);
  light.position.set(0, 0, 1);
  scene.add(light);

  // CHANGED --------------------------------------
  
	var uniforms = THREE.UniformsUtils.merge( [

		THREE.UniformsLib[ "ambient" ],
		THREE.UniformsLib[ "lights" ]

	] );

  var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').innerHTML,
    fragmentShader: document.getElementById('fragmentShader').innerHTML,
    lights: true
  });

  // CHANGED --------------------------------------

  var geometry = new THREE.TorusKnotGeometry(1, .3);
  var knot = new THREE.Mesh(geometry, material);
  scene.add(knot);

  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 3;

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  };

  render();