example.js

let scene, camera, renderer, animationId, controls
let geometry, material, mesh
let loader
let currentModel

function init() {
    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    )
    camera.position.z = -3;

    controls = new OrbitControls(camera)

    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setFaceCulling( THREE.CullFaceNone );
    renderer.setSize(window.innerWidth, window.innerHeight)

    document.body.appendChild(renderer.domElement)

    //////////

    var ambient = new THREE.AmbientLight( 0x404040, 5 );
    scene.add(ambient);
}

window.showModel = function(model) {
    testUpdate();
  });
}

function testUpdate() {
  // An array of Materials
  var materialArray = [
      new THREE.MeshBasicMaterial({
          color: 0xff0000
      }),
      new THREE.MeshBasicMaterial({
          color: 0x00ff00
      }),
      new THREE.MeshBasicMaterial({
          color: 0x0000ff
      })
  ];

  // Sphere
  var geometry = new THREE.SphereGeometry(1, 15, 15);

  // looping over all faces and setting the material index property
  geometry.faces.forEach(function (face, i) {
      face.materialIndex = Math.floor(i % materialArray.length);
  });

  var sphere = new THREE.Mesh(geometry,materialArray);

  scene.add(sphere);
}

function animate() {
    animationId = requestAnimationFrame(animate)

    controls.update();

    renderer.render(scene, camera)
}

init()
animate()

// Event listeners
function resize() {
    camera.aspect = innerWidth / innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(innerWidth, innerHeight)
}

addEventListener('resize', resize)