マテリアルとは、物の質感のことです。物体の表面のつるつるした質感やマットな質感を表現します。質感の指定方法について書きます。
- Materialsの基本的な記述
- MeshBasicMaterial
- MeshNormalMaterial
- MeshLambertMaterial
- MeshPhongMaterial
- MeshToonMaterial
- MeshStandardMaterial
- MeshDepthMaterial
- まとめ
- 参考サイト
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();
まとめ
物体の質感の指定方法について書きました。鉄のような質感にしたい場合や、プラスチックのような質感にしたい場合などがあると思います。どのマテリアルにするかによって、見た目から受ける印象が変わります。
