Three.js - Using CubeTextureLoader to create a different image on each face of a cube

Question

I\'m trying to create a cube with a different image on each side using CubeTextureLoader. My process is:

1. Load a cube texture using new THREE

Answer 1

THREE.MultiMaterial has also been removed, as described in: https://github.com/mrdoob/three.js/issues/10931

Now, you can use an array of materials in the mesh constructor instead. 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 );