概要
円柱型の間の側面に「お茶」と書きたいけど、蓋と底は書かなくていいような場合に、どうしたらよいか悩んでいました。 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するとか)があると嬉しい。。?