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

user_88605 0
Viewed 9290

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.CubeTextureLoader()
  2. Create a new material using the cube texture
  3. Create a cube using this material
  4. Draw the cube

The relevant code is below. I can draw a cube with a single material for all faces fine using THREE.TextureLoader(), but when I use CubeTextureLoader I get nothing onscreen or any console errors.

var textureLoader = new THREE.CubeTextureLoader();

textureLoader.load([
    'textures/face-1.jpg',
    'textures/face-2.jpg',
    'textures/face-3.jpg',
    'textures/face-4.jpg',
    'textures/face-5.jpg',
    'textures/face-6.jpg'
 ], function (texture) {
    var material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: texture
    });

    var cube = new THREE.Mesh(
        new THREE.BoxGeometry(20, 20, 20),
        material
    );

    // add & draw calls happen after all this
});

I'm guessing I'm using the wrong Material type or Mesh but can't find any info or examples on how to do this correctly. Any ideas?

three.js 3d javascript
2 Answers

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 );
user_14773530
Related