Set different materials on cube's different side?

In chrome console it says that material as an array has been deprecated. I want to apply different material to cube’s different side.

//convert from SVG
var imageCanvas = document.createElement("canvas");
canvg(imageCanvas, image.svg);

var texture = new THREE.Texture(imageCanvas);
texture.needsUpdate = true;

var geometry = new THREE.CubeGeometry(200, 10, 200);
var cubeMaterial = new THREE.MeshBasicMaterial({
    map : texture
});

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

Like this, all 6 cube’s sides have that picture as material. I would like to apply that picture material to only 2 sides an on the rest 4 I would like to put a color. How can I do that?

And also, is there any other place between this issues list, API Docs and those examples here on GitHub where I can lear Three.js?

[mrienstra]

Hi Dino4674,

This issue / solution might be what you are looking for: #744

This worked for me:

var materials = [
    leftSide,        // Left side
    rightSide,       // Right side
    topSide,         // Top side
    bottomSide,      // Bottom side
    frontSide,       // Front side
    backSide         // Back side
];
var geometry = new THREE.CubeGeometry(100, 75, 8, 1, 1, 1, materials);
var someMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

[Dino4674]

It looks like you were right after all.

I your say

cube.lookAt(camera.position)

you can see exactly which one is the front.

So the answer is that Three looks on Y as height and Z as depth.