Cubeの各面に異なるマテリアルを使うときはTHREE.jsのバージョンに注意!

各面が異なる色のCubeを作成することを考えます。

バージョンr53以前

test.js

    //Cube
    var materials = [];

    for(var i = 0;i < 6;i++){
        materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
    }

    var CUBE_WIDTH = 200;
    var CUBE_HEIGHT = 200;
    var CUBE_DEPTH = 200;
    var CUBE_WIDTH_SEGMENTS = null;
    var CUBE_HEIGHT_SEGMENTS = null;
    var CUBE_DEPTH_SEGMENTS = null;

    var cube_geo = new THREE.CubeGeometry(
        CUBE_WIDTH,
        CUBE_HEIGHT,
        CUBE_DEPTH,
        CUBE_WIDTH_SEGMENTS,
        CUBE_HEIGHT_SEGMENTS,
        CUBE_DEPTH_SEGMENTS,
        materials
    );
    //空のマテリアル
    var cube_material = new THREE.MeshFaceMaterial();

    cube = new THREE.Mesh(cube_geo,cube_material);

    scene.add(cube);

Geometryの最後の引数に各面のマテリアルが入った配列を指定しています。MeshはGeometryと空のマテリアルを入れています。

バージョンr53で仕様変更

・THREE.jsの仕様変更履歴
https://github.com/mrdoob/three.js/wiki/Migration

r52→r53
Geometry no longer has a materials property. MeshFaceMaterials usage is now like this: new >THREE.Mesh( geometry, new THREE.MeshFaceMaterials( [ material1, material2 ] ) ). Meaning that >face.materialIndex will map the array passed to MeshFaceMaterials.

バージョンr53以降

test_r53.js

    var cube_geo = new THREE.CubeGeometry(
        CUBE_WIDTH,
        CUBE_HEIGHT,
        CUBE_DEPTH,
        CUBE_WIDTH_SEGMENTS,
        CUBE_HEIGHT_SEGMENTS,
        CUBE_DEPTH_SEGMENTS
    );
    //空のマテリアル
    var cube_material = new THREE.MeshFaceMaterial(materials);

バージョンr53以降ではGeometryの引数にマテリアルを指定することはできません。代わりにMeshFaceMaterialの引数にマテリアルの配列を入れます。