THREE.MeshFaceMaterial has been removed. Use an Array instead

Question

Currently trying to wrap images around a cube on three.js and getting the following error 'THREE.MeshFaceMaterial has been removed. Use an Array instead.', from previous searches it looks like the method I'm trying to use might not be available anymore, is there a new method that anyone knows of? I'll attach the code below. Any help would be greatly appreciated. Thanks in advance, Mike.

<script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/ParallaxBarrierEffect.js"></script>

    <script>
        (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

        window.addEventListener('resize', function ()
        {
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });

        //var effect = new THREE.ParallaxBarrierEffect(renderer);
        //effect.setSize(window.innerWidth, window.innerHeight);

        controls = new THREE.OrbitControls(camera, renderer.domElement)

        /* var loader = new THREE.ObjectLoader();

        loader.load
        (
            'models/skull.json',

            function(object)
            {
                scene.add(object);
            }
        );

        */

        var geometry = new THREE.CubeGeometry(10000,10000,10000);

        var cubeMaterials = 
        [
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/right.png'), side: THREE.DoubleSide}), // RIGHT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/left.png'), side: THREE.DoubleSide}), // LEFT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/top.png'), side: THREE.DoubleSide}), // TOP SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/bottom.png'), side: THREE.DoubleSide}), // BOTTOM SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/front.png'), side: THREE.DoubleSide}), // FRONT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/back.png'), side: THREE.DoubleSide}) // BACK SIDE
        ];

        var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
        var cube = new THREE.Mesh(geometry, cubeMaterial);

        scene.add(cube);


        camera.position.z = 3;

        var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.3);
        scene.add(ambientLight);


        var light1 = new THREE.PointLight(0xFF0040, 4, 5);
        //scene.add(light1);

        var light2 = new THREE.PointLight(0x0040FF, 2, 5);
        //scene.add(light2);

        var light3 = new THREE.PointLight(0x80FF80, 4, 5);
        //scene.add(light3);

        var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
        directionalLight.position.set(0,1,0);
        //scene.add(directionalLight);

        var spotLight = new THREE.SpotLight(0xFF45F6, 200);
        spotLight.position.set(0,3,3);
        //scene.add(spotLight);

        var update = function()
        {
            //cube.rotation.x += 0.01;
            //cube.rotation.z += 0.005;

            var time = Date.now() * 0.0005;

            light1.position.x = Math.sin(time + 0.7) * 30;
            light1.position.x = Math.cos(time + 0.5) * 40;
            light1.position.x = Math.cos(time + 0.3) * 30;

            light2.position.x = Math.cos(time + 0.3) * 30;
            light2.position.x = Math.sin(time + 0.5) * 40;
            light2.position.x = Math.sin(time + 0.7) * 30;

            light3.position.x = Math.sin(time + 0.7) * 30;
            light3.position.x = Math.cos(time + 0.3) * 40;
            light3.position.x = Math.sin(time + 0.5) * 30;

        };

        var render = function()
        {
            renderer.render(scene, camera);
        };



        var GameLoop = function()
        {
            requestAnimationFrame(GameLoop);

            update();
            render();
        };

        GameLoop();
    </script>

Answer 1

You can change the THREE.MeshFaceMaterial(cubeMaterials)for THREE.MeshBasicMaterial(cubeMaterials) if you are trying to create a skybox. However be aware that your perspective camera are rendering until 1000 and your box has 10000 units, so you will have to change your camera variable if you want to see the sky box.