Three.js|質感:Materials

マテリアルとは、物の質感のことです。物体の表面のつるつるした質感やマットな質感を表現します。質感の指定方法について書きます。

Materialsの基本的な記述

コードの記述例は、以下です。

// ジオメトリを作成
const geometry = new THREE.BoxGeometry(1, 1, 1);
// マテリアルを作成
  const material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
// メッシュを作成
const cube = new THREE.Mesh(geometry, material);
// シーンにメッシュを追加
scene.add(cube);

MeshBasicMaterial

単純なシェーディング(べた塗り、ワイヤーフレーム)方法でジオメトリを描画するためのマテリアルです。光源の影響を受けません。

// コード例
const material = new THREE.MeshBasicMaterial( { color: 0x0000ff} );

MeshNormalMaterial

法線ベクトルをRGBカラーにマップするマテリアルです。法線ベクトルとは3次元では、ある面に対して垂直なベクトルのことです。

// コード例
const material = new THREE.MeshNormalMaterial();

MeshLambertMaterial

ハイライトのない鏡面反射光です。光沢がない質感になります。

// コード例
const material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );

MeshPhongMaterial

ハイライトがある鏡面反射光です。光沢がある質感になります。

// コード例
const material = new THREE.MeshPhongMaterial( { color: 0x0000ff } );

MeshToonMaterial

トゥーンシェーディングを実装するマテリアルです。アニメの塗りのようになります。

// コード例
const material = new THREE.MeshToonMaterial( { color: 0x0000ff } );

MeshStandardMaterial

標準的な物理ベースのマテリアルです。

// コード例
const material = new THREE.MeshStandardMaterial( { color: 0x0000ff } );

MeshDepthMaterial

カメラとの距離で質感を表現します。カメラに近いと白くなり、遠いと黒くなります。

// コード例
const material = new THREE.MeshDepthMaterial();

まとめ

物体の質感の指定方法について書きました。鉄のような質感にしたい場合や、プラスチックのような質感にしたい場合などがあると思います。どのマテリアルにするかによって、見た目から受ける印象が変わります。

参考サイト

• Three.js公式サイト
• マテリアルの種類 Three.jsの使い方を勉強してみた