JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  margin: 0;
}

JavaScript

var camera, scene, renderer, stats;

var mesh;
var amount = 5;
var count = Math.pow(amount, 3);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(1, 1);

var rotationTheta = 0.1;
var rotationMatrix = new THREE.Matrix4().makeRotationY(rotationTheta);
var instanceMatrix = new THREE.Matrix4();
var matrix = new THREE.Matrix4();

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(amount, amount, amount);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();
  var geometry = new THREE.PlaneBufferGeometry(2, 2);

  var material = new THREE.MeshBasicMaterial({
      map: new THREE.TextureLoader().load(
        "https://threejs.org/examples/textures/square-outline-textured.png"
      ),
      side: THREE.DoubleSide,
      blending: THREE.AdditiveBlending,
      transparent: true
    });


  mesh = new THREE.InstancedMesh(geometry, material, count);

  var i = 0;
  var offset = 0;

  var transform = new THREE.Object3D();
  var textures = [];

  for (var x = 0; x < 1; x++) {
      for (var z = 0; z < amount; z++) {
        transform.position.set(offset - x, 0, offset - z);
        transform.updateMatrix();

        mesh.setMatrixAt(i++, transform.matrix);

        textures.push(Math.random() < 0.3 ? 0 : Math.random() < 0.5 ? 1 : 2);
      }
  }

  geometry.setAttribute(
    "textureIndex",
    new THREE.InstancedBufferAttribute(new Float32Array(textures), 1)
  );

  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  new THREE.OrbitControls(camera, renderer.domElement);

  stats = new Stats();
  document.body.appendChild(stats.dom);

  window.addEventListener("resize", onWindowResize, false);
}

function onWindowResize() {
  camera.aspect =...