R3F / ThreeJS - Multiple materials on each cube face. ThreeJS does not support stacking materials -- see instanced geometry + groups.

MultipleMaterials.tsx

import * as THREE from "three";
import { MeshProps, useFrame } from "@react-three/fiber";
import { Mesh } from "three";
import { useRef } from "react";

type MultiMaterialMeshProps = MeshProps & {};

export default function MultiMaterialMesh({}: MultiMaterialMeshProps) {
  const geom = useRef<Mesh>();

  const materials = ["red", "green", "blue", "cyan", "magenta", "yellow"].map(
    (color, index) => (
      // Should work in ThreeJS-land - doesn't work for R3F
      // <meshBasicMaterial key={color} attachArray="material" color={color} />
      <meshBasicMaterial
        key={index}
        attach={`material-${index}`}
        color={color}
      />
    )
  );
  return (
    <>
      <mesh ref={geom} position={[0, 0, 0]}>
        <boxBufferGeometry args={[1, 1, 1]} />
        {materials}
      </mesh>
    </>
  );
}