Three.jsのBoxGeometryでそれぞれの面に別々の色を指定する方法

Three.jsで直方体の面に別々の色をあてたいので調べてみた

HTML5による物理シミュレーションを読んでいるのですが

HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo

作者: 遠藤理平
出版社/メーカー: カットシステム
発売日: 2013/02
メディア: 単行本
この商品を含むブログ (4件) を見る

物体の面ごとに違う色などを指定してあげたいので調べてみた

(1) MeshFaceMaterialを使う

こちらの記事を参考にしました THREE.jsのCubeGeometryで六面別々のMaterial(Texture)を使う方法 - tsuge development page

しかし2年前の記事だからなのかちょっと記述方法が今と異なってたので訂正 (three.jsのリビジョンはr69を使ってます)

MeshFaceMaterialメソッドを使えば複数面をバラバラに指定することが出来ます例えば直方体を描写する時は、一番シンプルなやつだと

//箱型オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//材質の宣言
var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);

のように記述しますが、六面に異なる色を付けたい場合は配列を用いて

//箱型オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//材質を配列で指定する(箱型なので6面分)
var materials = [
    new THREE.MeshLambertMaterial({color: 0x00ff00}),
    new THREE.MeshLambertMaterial({color: 0x00ff00}),
    new THREE.MeshLambertMaterial({color: 0x0000ff}),
    new THREE.MeshLambertMaterial({color: 0x0000ff}),
    new THREE.MeshLambertMaterial({color: 0xff0000}),
    new THREE.MeshLambertMaterial({color: 0xff0000})
];
//MeshFaceMaterialで材質を宣言
var material = new THREE.MeshFaceMaterial(materials);
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);

のようにします。 MeshFaceMaterialの引数にmaterialsを用いてあげます。

ドキュメントに書いてあるんだけどちょっとわかりにくいんだよね・・・英語だし http://threejs.org/docs/#Reference/Materials/MeshFaceMaterial

(2) for文でロープ表現を用いる =>ランダムに色が指定されます

これは、three.jsのファイルをダウンロードした時のexampleフォルダに入ってるcanvas_geometry_cube.html内の記述を参考にしました

コードを書いてやると

//形状オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//for文で材質をランダムに指定
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
    var hex = Math.random() * 0xffffff;
    geometry.faces[ i ].color.setHex( hex );
    geometry.faces[ i + 1 ].color.setHex( hex );
}
//材質の宣言
var material = new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors });
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);