Trouble with THREE.CubeTextureLoader - three.js

Question

I'm trying to create 3d dice with texture maps on a cube. If I just load a single texture it displays fine (although, of course, I can't specify different images for each side). I tried using CubeTextureLoader but I get a totally garbled texture (Here's what I see). Any suggestions?
// This doesn't work
THREE.CubeTextureLoader().load(['/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png'], function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshPhongMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.x = 10;
cube.position.y = -20;
self._scene.add(cube);
self.update();
});
// This works fine
new THREE.TextureLoader().load('/public/images/dice6-red.png', function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshBasicMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.y = -20;
self._scene.add(cube);
self.update();
});

Answer 1

To place different images on the sides of a cube in the current version of Three.js (v93), use an array of materials in the mesh constructor. For example:
let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );