JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

JavaScript

THREE.TestShader = {
  uniforms: {
    "uDirLightPos": {
      type: "v3",
      value: new THREE.Vector3(20, 20, 20)
    },
    "uDirLightColor": {
      type: "c",
      value: new THREE.Color(0xffffff)
    },
    "uTexture": {
      type: "t",
      value: null
    },
  },
  vertexShader: [
    "varying vec3 vNormal;",
    "varying vec3 vViewPosition;",
    "varying vec2 vUv;",
    "void main() {",
    "vUv = uv;",
    "vNormal = normalize(normalMatrix * normal);",
    "vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);",
    "vViewPosition = -mvPosition.xyz;",
    "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
    "}"
  ].join("\n"),
  fragmentShader: [
    "uniform vec3 uDirLightPos;",
    "uniform vec3 uDirLightColor;",
    "varying vec2 vUv;",
    "varying vec3 vNormal;",
    "varying vec3 vViewPosition;",
    "varying vec4 mvPosition;",
    "uniform sampler2D uTexture;",

    "void main() {",
    "vec4 lDirection = viewMatrix * vec4(uDirLightPos, 0.0);",
    "vec3 lVector = normalize(lDirection.xyz);",
    "vec3 normal = normalize(vNormal);",
    "float diffuse = dot(normal, lVector);",
    "vec4 texel = texture2D( uTexture, vUv );",
    "gl_FragColor = vec4(uDirLightColor * diffuse, 1.0) * texel;",
    "}"
  ].join("\n")
};

var camera, renderer, composer, clock, scene, mesh1, mesh2, light;
var height = 500,
  width = 500;
var objData =...