three.js r81: How can do i make a cube with diffrent textures on each face

I just updated to the latest version of three.js, and THREE.ImageUtils.loadTexture doesn't work anymore. So i searched for cubes with different faces but they all use the old technique " new THREE.ImageUtils.loadTexture". I tried making one with "new THREE.TextureLoader.load(' texture1.png ')". This is what i have:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="library/threejs/build/three.js"></script>

        <script>
            var camera, scene, renderer;
            var head;
            var loader = new THREE.TextureLoader();
            init();
            animate();
            function init() {
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;
                scene = new THREE.Scene();
            materials = [
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headfront.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headback.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headleft.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headright.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headup.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headdown.png' )];

    head = new THREE.Mesh(
            new THREE.BoxBufferGeometry(80, 80, 80, 1, 1, 1, materials),
            new THREE.MeshBasicMaterial({ map: materials })
    );
                scene.add( head );
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            function animate() {
                requestAnimationFrame( animate );
                head.rotation.x += 0.005;
                head.rotation.y += 0.01;
                renderer.render( scene, camera );
            }
        </script>

    </body>
</html>

but i'm getting the error:

TypeError: offset is undefined

and

THREE.WebGLShader: Shader couldn't compile

and also

THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:238:   
'mapTexelToLinear' : no matching overloaded function found

So if you know how to fix this or just know how to make a cube with 6 different sides that would be awesome! thanks!

Solution

THREE.js has an undocumented material, THREE.MeshFaceMaterial which has been deprecated for a while now but still works in r81.

// Make an array of six regular materials
var materials = [
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8B1rYNY.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8w6LAV6.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/aVCY4ne.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/tYOW02D.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/nVAIICM.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/EDr3ed3.png")})
];
var geometry = new THREE.BoxBufferGeometry(200, 200, 200);

// Use THREE.MeshFaceMaterial for the cube, using the array as the parameter
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

Demo

Apparently the way this works internally is by creating a THREE.BufferGeometry plane for each face of the cube and applying each material to a face (mrdoob himself). In other words, if this method stops working your alternative is to manually make a cube out of 6 planes, make them children of a null object so you can treat them as a single cube, and then apply your materials to each plane separately.

If you don't need to dynamically determine the cube faces at runtime and can "bake" them into a texture, a technically better (but more difficult) option is to use UV mapping.