THREE.jsのCubeGeometryで六面別々のMaterial(Texture)を使う方法
6面違う画像を表示するのにちょっとてこずったのでメモ。
これで出来る。
//シーンとかライトとか作る //... //6面分のマテリアルを生成 var materials = [ new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/human.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/null.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/human.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/null.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/null.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/human.png")}) ]; //メッシュ用のマテリアルとしてMeshFaceMaterialを指定 var material = new THREE.MeshFaceMaterial(); //CubeGeometryを作る時に、7番目の引数に6面分のマテリアルを指定 var geometry = new THREE.CubeGeometry(30,30,30,null,null,null,materials); //メッシュ用にはなんの機能もないMeshFaceMaterialを指定する var mesh = new THREE.Mesh( geometry, material ); //シーンに追加 scene.add(mesh);
CubeGeometryの7番目の引数には結構早めに気づいてたんだけど、MeshFaceMaterialを指定するっていうのがわかんなかった。
MeshFaceMaterialの中身のぞくとこうなってるから、作りかけなのかと思ったよ。
/** * @author mr.doob / http://mrdoob.com/ */ THREE.MeshFaceMaterial = function () { };
WebGLRendererとかCanvasRendererとかではinstanceofして見てるんで、MeshFaceMaterial以外のマテリアルだとMeshのマテリアルが優先されて使われちゃうんだろうとは思う。
一応さっきのソース実行した結果もおいとく。