【Three.js】いろいろなマテリアルを貼ってみる

Three.jsの続きです。ics.mediaの「Three.js入門」前回までは入門編、今回から「基礎編」に入ります！まずはマテリアル。質感の設定です。入門編の頃にも少し触れましたが、今回はいろいろな種類のマテリアルを貼ってみます。それでは行きましょう！

【目次】

※参考：以前書いたマテリアルの記事
【Three.js】マテリアルとライティング設定（入門編に再入門！） - クモのようにコツコツと

※参考：前回の記事
【Three.js】OrbitControls.jsでカメラの位置をインタラクティブに動かす！ - クモのようにコツコツと

※Three.jsを習得するためにやったことまとめ
qiita.com

MeshBasicMaterial()：ベタ一色

ics.mediaの「Three.js入門」基礎編の「マテリアル」を見ていく。マテリアルとは質感の設定のこと。

※参考：Three.jsのさまざまなマテリアル - ICS MEDIA

最初はMeshBasicMaterial()で、影が付かないベタ塗りマテリアル。ライティング設定が不要。

See the Pen three.js - MeshBasicMaterial() by イイダリョウ (@i_ryo) on CodePen.

マテリアル設定部分

const material = new THREE.MeshBasicMaterial({color: 0xA63744});

変数materialでTHREE.MeshBasicMaterial()インスタンスを作成。MeshBasicMaterial()の引数でcolor設定をしているが、これがないと真っ白になる。形状の確認のみならこれで済ませるとお手軽。

THREE.Mesh()の第二引数でmaterialを読み込む。

const mesh = new THREE.Mesh(geometry, material);

MeshNormalMaterial()の詳細は公式ページ参照

※参考：three.js docs

---

記事公開時にジオメトリを球体にしていましたが別の形状の方がわかりやすかったため、ドーナツ型にしました。（2020/05/31修正）

※参考：【Three.js】ジオメトリ設定で形状を色々変えてみる - クモのようにコツコツと

MeshNormalMaterial()：ライティング不要

次のMeshNormalMaterial()もライティング不要のマテリアル。以前の記事でも扱ったマテリアル。

※参考：【Three.js】マテリアルとライティング設定（入門編に再入門！） - クモのようにコツコツと

See the Pen three.js 15 by イイダリョウ (@i_ryo) on CodePen.

キレイなグラデーションの色になって自ら発光している。

マテリアル設定部分

  const material = new THREE.MeshNormalMaterial();

変数materialでTHREE.MeshNormalMaterial()インスタンスを作成

MeshNormalMaterial()の詳細は公式ページ参照

※参考：three.js docs

MeshLambertMaterial()：マット調

MeshLambertMaterial()はツヤがないマットな質感のマテリアル。

See the Pen three.js MeshLambertMaterial by イイダリョウ (@i_ryo) on CodePen.

マテリアル設定部分

      const material = new THREE.MeshLambertMaterial({color: 0xA63744});

ここから先はライティングの設定が必要。ライティングについては下記を参照。

※参考：【Three.js】マテリアルとライティング設定（入門編に再入門！） - クモのようにコツコツと

MeshLambertMaterial()の詳細は公式ページ参照

※参考：three.js docs

MeshPhongMaterial()：フォンシェーディング

MeshPhongMaterial()は光沢感があるマテリアル。

See the Pen three.js MeshPhongMaterial by イイダリョウ (@i_ryo) on CodePen.

マテリアル設定部分

const material = new THREE.MeshPhongMaterial({color: 0xA63744});

フォンシェーディングとはポリゴンの平面と平面の間を補間して滑らかに見せる技法らしい。

※参考：フォンシェーディング - Wikipedia

MeshPhongMaterial()の詳細は公式ページ参照

※参考：three.js docs

MeshToonMaterial()：トゥイーンシェーディング

MeshToonMaterial()はトゥイーンシェーディング を実現するマテリアル

See the Pen three.js MeshToonMaterial by イイダリョウ (@i_ryo) on CodePen.

アニメの2Dみたいな質感になった！

マテリアル設定部分

const material = new THREE.MeshToonMaterial({color: 0xA63744});

MeshToonMaterial()の詳細は公式ページ参照

※参考：three.js docs

MeshStandardMaterial()：物理ベースレンダリング

MeshStandardMaterial()は物理ベースレンダリングのマテリアル

See the Pen three.js MeshStandardMaterial by イイダリョウ (@i_ryo) on CodePen.

マテリアル設定部分

const material = new THREE.MeshStandardMaterial({color: 0xA63744, roughness:0.5});

オプションにroughness:0.5を追加。光沢感の量のプロパティ。

「物理ベースレンダリング」は光の反射などより現実世界に近いマテリアルを再現する。オプションで設定できる範囲も多い。

※参考：物理ベースシェーディング - Wikipedia

MeshStandardMaterial()の詳細は公式ページ参照

※参考：three.js docs

最後に

ということでいろんなマテリアルの質感の違いについて比較しました。並べてみると違いが分かりやすかったです。基本的にはメソッド名を入れ替えるだけでシンプル。オプションはメソッドの引数に連想配列形式で入れます。

次回は「ライト」編に入ります！これまで並行光源のみでしたが他のいろいろな設定も体験できそうです。それではまた！

---

※Three.jsを習得するためにやったことまとめ
qiita.com