JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<canvas id="canvasThree" width="400" height="400"></canvas>
<br>
<input id="tex0" type="file">
<input id="tex1" type="file">
<br>
<input id="tex2" type="file">
<input id="tex3" type="file">

JavaScript

function setTexture(id, file, action){
	console.log("updating texture "+id);
  const reader = new FileReader();
  reader.onload = () => {
  	new THREE.TextureLoader().load(
	    reader.result,
      tex => {
      	//Using offset to push the texture into the [0-1] range. The -id comes from the fact that each uv was incremented by 1 for the different groups:
      	tex.offset = new THREE.Vector2(-id, 0);
        
        //Using wrapping to make values > 1 wrap back into the [0-1] range:
        /*
        tex.wrapS = THREE.RepeatWrapping;
  			tex.wrapT = THREE.RepeatWrapping;
        */
        mat[id].map = tex;
        mat[id].needsUpdate = true;
      }
    );
  };
  
  reader.readAsDataURL(file);
}

//Basic THREE setup:
const canvas = document.getElementById("canvasThree");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 1, 10);
const renderer = new THREE.WebGLRenderer({ canvas });
const light = new THREE.PointLight(0xFFFFFF);
camera.position.set(0, 0, 6);
light.position.set(0, 1, 2);
scene.add(light);

//This is our geometry, basically four squares in a line. Note that for each square the UV-coordinates (tex-array) are incremented by 1.
const pos = new Float32Array([0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 2, 1, 0, 2, 0, 0, 1, 0, 0, 2, 1, 0, 3, 1, 0, 3, 0, 0, 2, 0, 0, 3, 1, 0, 4, 1, 0, 4, 0, 0, 3, 0, 0]);
const nrm = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
const tex = new Float32Array([0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 2, 1, 2, 0, 1, 0, 2, 1, 3, 1, 3, 0, 2, 0, 3, 1, 4, 1, 4, 0, 3, 0]);
const indices = [0, 3, 2, 2, 1, 0, 4, 7, 6, 6, 5, 4, 8, 11, 10, 10, 9, 8, 12, 15, 14, 14, 13, 12];
const geo = new THREE.BufferGeometry();
geo.addAttribute("position", new THREE.BufferAttribute(pos, 3));
geo.addAttribute("normal", new THREE.BufferAttribute(nrm, 3));
geo.addAttribute("uv", new THREE.BufferAttribute(tex,...