JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

// Setting a different material for each face
// Three.JS r.73

var mesh, renderer, scene, camera, materials;

init();
animate();

document.body.onclick = function () { materials[ 1 ] = materials[ 0 ]; };

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 300;
    camera.lookAt( scene.position );
    
    // directional
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );
    
    // ambient
    var ambient = new THREE.AmbientLight( 0x222222 );
    scene.add( ambient );

    // geometry
    var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
    
    // materials
    materials = [
        new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
    ];
    
    // assign material to each face
    for( var i = 0; i < geometry.faces.length; i++ ) {
        geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
    }
    geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls

    // mesh
    mesh = new THREE.Mesh( geometry, materials );
    scene.add( mesh );
    
}

function animate() {

    requestAnimationFrame( animate );
    
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    mesh.rotation.z += 0.03;
    
    renderer.render( scene, camera );
    
}