JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

JavaScript

import * as THREE from 'https://unpkg.com/three@0.121.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.121.1/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer, controls;

init();
render();

function init() {
  scene = new THREE.Scene();
	scene.background = new THREE.Color(0xdadada);

  camera = new THREE.PerspectiveCamera(
  	50,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.z = 50;
  scene.add(camera);
 
  {
  	// box with one material
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);

    const mesh = new THREE.Mesh(boxG, material);
    mesh.position.set(20, 0, 20);
    scene.add(mesh);
  }
  
  {
  	// instanced box with one material
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);

    const mesh = new THREE.InstancedMesh(boxG, material, 1);
    const dummy = new THREE.Object3D();
    dummy.position.set(20, 0, -20);
    dummy.updateMatrix();
    mesh.setMatrixAt(0, dummy.matrix);
    mesh.instanceMatrix.needUpdate = true;
    scene.add(mesh);
  }
 
  {
  	// box with multiple materials 
    const materialA = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const materialB = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);
    boxG.faces.forEach((face, i) => {
      face.materialIndex = i % 2;
    });

    const mesh = new THREE.Mesh(boxG, [materialA, materialB]);
    mesh.position.set(-20, 0, 20);
    scene.add(mesh);
  }
  
  {
    // instanced box with multiple materials 
    const materialA = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const materialB = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const boxG = new THREE.BoxGeometry(10, 10, 10);
    boxG.faces.forEach((face, i) => {
      face.materialIndex = i % 2;
    });

    const mesh = new...