概要
円柱型の間の側面に「お茶」と書きたいけど、蓋と底は書かなくていいような場合に、どうしたらよいか悩んでいました。 webページはこちら普通に、「お茶」テクスチャをかぶせると全面を包んでしまうため、左の筒のように蓋の上にも文字が書かれます。困った。
解決方法
右のように側面だけにするには、 MeshFaceMaterialを使用します。そうすることで複数のMaterialを使い分けられます。 MeshFaceMaterialはそれらをリストにして持ちます。side_materialが0番目、end_materialが1番目のMaterialで、これをfaceIndexといいます。face(Geometryを分割したSegmentごとの面)に使うfaceIndexを変えることで、複数のface
var side_material = new THREE.MeshPhongMaterial({ map: texture });
var end_material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
material = new THREE.MeshFaceMaterial([side_material, end_material]);
//
obj = new THREE.Mesh(geometry, material);
//後ろ radialSegments*2個は end_material
//それ以外は side_material
for(var i = 0; i < geometry.faces.length-geometry.parameters.radialSegments*2; i++){
geometry.faces[i].materialIndex = 0;
}
for(var i = geometry.faces.length-geometry.parameters.radialSegments*2; i < geometry.faces.length; i++){
geometry.faces[i].materialIndex = 1;
}
コードはこちら
おまけ
どのfaceをend_materialにするかがポイントですが、今回はCylinderGeometryのコードの内部で、先に側面のfaceを追加し、後で蓋、底のfaceを追加していることを利用して、geometry.facesの配列上の位置で特定しました。本来なら、face(というかsegment)ごとに法線ベクトルを調べてcap/endを特定するのが良さそうではあります。
"cap", "end"みたいな名前を指定してfaceの集合が得られるような関数(かそれに続けて関数をmapするとか)があると嬉しい。。？
