not good but great

プログラミング、アート、映画・本の感想について書きます。

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

Cubeの各面に異なるマテリアルを使う

見事にハマったのでメモしておく。

    //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);

Cubeの6面に異なる色のマテリアルを使用することを考える。

・参考デモ
three.js canvas - geometry - cube

しかし上のコードを写経しても自分の環境では動かなかった。

バージョンr53で仕様変更があった

調べると衝撃の事実が判明。

バージョンr53以降にはGeometryの引数にmaterialsを指定することはできない。

・ドキュメント変更部分
Migration · mrdoob/three.js Wiki · GitHub

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.

・参考サイト
Three.js cube with different texture on each face - Stack Overflow

MeshFaceMaterialsにmaterialを指定する

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以降はこれで動く。jsdoitのthreejsライブラリのバージョンがr60だったため写経しても動かなかった。参考にしたデモサイトのバージョンはr46だった。