JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
  varying vec2 vUv;
  void main() {
  	 vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
  varying vec2 vUv;
  uniform sampler2D texture;
  uniform vec3 ambientLightColor;
  void main() {
     vec4 t = texture2D(texture, vUv * vec2(1, 1));
     vec3 c = t.rgb;
     gl_FragColor = vec4(c*ambientLightColor,1.0);
  }
</script>

CSS

body {
   margin: 0;
 }

JavaScript

var scene = new THREE.Scene();

  var light = new THREE.AmbientLight(0xffffff, 1.0);
  scene.add(light);
  
  var tex = new THREE.TextureLoader().load('https://i.imgur.com/F65SfTs.jpg');

	var uniforms = THREE.UniformsUtils.merge( [
		THREE.UniformsLib[ "lights" ],
    {
      texture: {type: "t", value: tex}
    }
    ]);

	//var uniforms = {texture: {type: "t", value: tex}};

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

  var geometry = new THREE.PlaneGeometry(3, 3, 3, .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();