読者です 読者をやめる 読者になる 読者になる

ネット偽善者でもいいじゃない

悩んでるなら面白いマンガ読もう

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

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

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

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

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

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

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

です。0xffffffをランダムな数字で掛け算してやることで毎度違う色を生成してるみたいです

今のところはこの2つなので他にもあれば便利だなーと思います。 なお、テクスチャをそれぞれの面で別々に指定する場合も最初の方法を使えば出来そうです