のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Three.jsの使いそうなマテリアル

Three.jsで使いそうなマテリアルです。

MeshBasicMaterial

面用のマテリアル。 陰がつかないので塗りつぶした状態になる。

new THREE.MeshBasicMaterial({color: 0x66B6FF});

MeshLambertMaterial

面用のマテリアル。 陰が表示される為奥行きがでる。 光沢は無し。

new THREE.MeshLambertMaterial({color: 0x66B6FF});

MeshPhongMaterial

面用のマテリアル。 陰が表示される為奥行きがでる。 光沢ありなので、emissive(影色)、shininess(光沢度合い)、specular(光沢部の色)を設定できる。

new THREE.MeshPhongMaterial({color: 0x66B6FF,specular: 0xffffff});

MeshFaceMaterial

面用のマテリアル。 各面に対してそれぞれマテリアルを設定できる。 MeshFaceMaterialsに各面に適応するマテリアルを指定します。

let materials = [
    new THREE.MeshBasicMaterial({ color: 0x1abc9c }),
    new THREE.MeshBasicMaterial({ color: 0x3498db }),
    new THREE.MeshBasicMaterial({ color: 0x9b59b6 }),
    new THREE.MeshBasicMaterial({ color: 0xf1c40f }),
    new THREE.MeshBasicMaterial({ color: 0xe74c3c }),
    new THREE.MeshBasicMaterial({ color: 0x34495e })
];

let material = new THREE.MeshFaceMaterial(materials);

MultiMaterial

ボックスの各面に別々のマテリアルを貼りたい場合に使う。

let textuer1 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let textuer2 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let textuer3 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let textuer4 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let textuer5 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let textuer6 = new THREE.MeshPhongMaterial({color: 0xcccccc });
let material = new THREE.MultiMaterial([textuer1, textuer2, textuer3, textuer4, textuer5, textuer6])

f:id:nogson2:20170517003849p:plain

PointsMaterial

ポイント用のマテリアル。 形状を持たない為、視点が変化しても同じ大きさで表示される。

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.PointsMaterial({ color: 0x66B6FF,size: 0.1});
let box= new THREE.Points(geometry, material);

THREE.LineBasicMaterial

ライン用のマテリアル。 ラインの引き方は設定できる。

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.LineBasicMaterial({ color: 0x66B6FF});
let box= new THREE.Line(geometry, material);

まとめ

他にもマテリアルがあるので追加していこうと思います。