Three.jsで3DCGを作ろう!〜主要マテリアル9種を徹底比較〜

Three.jsで3DCGを作ろう!〜主要マテリアル9種を徹底比較〜

Yuya Nishizawa

Yuya Nishizawa

新卒ブログとは?
2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。

こんにちは、新米エンジニアのにっしーです!

先日、友人宅でルービックキューブに挑戦するも、まったく歯が立たず……。「そうだ、Three.jsで脳内シミュレーションすれば構造的に理解できるはず!」とチャレンジしてみた結果、見事に脳がショートしました😇

そんなことはさておき、Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」をThree.js Journeyという教材を使いながら、勉強しています。

前回までは制作物を紹介していましたが、今回は基礎的な部分であるマテリアルの概要と種類をまとめていきたいと思います。

画面を触ることで見え方が変わるので、ぜひいじくりまわしてください。

※導入方法などは端折らせていただきます。あらかじめご了承ください。

マテリアルとは

オブジェクトの表面の質感設定のことです。ツルツルさせたりザラザラさせたりするだけでなく、色や陰影なども変更できるので、オブジェクトの見栄えに大きく関わってきます。

マテリアルの種類

Three.jsのマテリアル9種をコードと実行画面と合わせて紹介していきます。

① MeshBasicMaterial

光源の影響を受けず、指定された色やテクスチャで均一に描画されるもっとも基本的な材質。

javascript

// 1-1. 初期値
const material = new THREE.MeshBasicMaterial()

/*
* materialに任意の設定を追加
*/
// 1-2. テクスチャの貼り付け
material.map = doorColorTexture
// 1-3. 塗り潰し
material.color = new THREE.Color(0x00ff00)
// 1-4. 骨組みの表示
material.wireframe = true
// 1-5. 透明度の有効化
material.transparent = true
material.opacity = 0.5
// 1-6. 両面描画
// 6B:反映 6C:未反映
material.side = THREE.DoubleSide

// シーンに追加
scene.add(material)


② MeshNormalMaterial

オブジェクトの法線(面の向き)ベクトルを色として描画する、主にデバッグ用途で使われる材質。

javascript

// 2-1. 初期値
const material = new THREE.MeshNormalMaterial()
// 2-2. オブジェクト表面をカクカクさせる(defalt false)
material.flatShading = true

scene.add(material)

③ MeshMatcapMaterial

シーンの光源を必要とせず、専用のテクスチャ画像に基づいて陰影や反射を擬似的に表現する材質。

javascript

// 3-1. 初期値
const material = new THREE.MeshMatcapMaterial()
// 3-2. オブジェクトにリアルな質感や光沢をつける
material.matcap = matcapTexture

scene.add(material)

④ MeshDepthMaterial

オブジェクトの色彩や光源を無視し、カメラからの深度(距離)のみを描画するための材質。

javascript

// 4-1. 初期値
const material = new THREE.MeshDepthMaterial()

scene.add(material)

⑤ MeshLambertMaterial

光沢(ハイライト)がなく、拡散反射のみを計算するマットな質感の材質。

javascript

// 5-1. 初期値
const material = new THREE.MeshLambertMaterial()

scene.add(material)

⑥ MeshPhongMaterial

鏡面反射による光沢(ハイライト)を持つ、滑らかな質感の材質。

javascript

// 6-1. 初期値
const material = new THREE.MeshPhongMaterial()
// 6-2. 光沢の設定
material.shininess = 100
material.specular = new THREE.Color(0x1188ff)

scene.add(material)

⑦ MeshToonMaterial

陰影を意図的に段階化し、セル画のようなトゥーン調の見た目を実現する材質。

javascript

// 7-1. 初期値
const material = new THREE.MeshToonMaterial()
// 7-2. 陰影とグラデーションの設定
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter
gradientTexture.generateMipmaps = false
material.gradientMap = gradientTexture

scene.add(material)

⑧ MeshStandardMaterial

物理ベースレンダリング(PBR)に対応し、金属や粗さなどのパラメータでリアルな質感を表現する現在の標準的な材質。

javascript

// 8-1. 初期値
const material = new THREE.MeshStandardMaterial()
// 8-2 半透明に変更
material.transparent = true

// 8-3 ドアのテクスチャの設定
material.metalness = 1
material.roughness = 1
material.map = doorColorTexture
material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1
// 8-4 より立体的に見せる設定
material.displacementMap = doorHeightTexture
material.displacementScale = 0.1
material.metalnessMap = doorMetalnessTexture
material.roughnessMap = doorRoughnessTexture
material.normalMap = doorNormalTexture
material.normalScale.set(0.5, 0.5)
material.alphaMap = doorAlphaTexture

scene.add(material)

⑨ MeshPhysicalMaterial

StandardMaterialを拡張し、クリアコート(ニス層)や、より高度な透過表現などを可能にした材質。

javascript

// 9-1 初期値
const material = new THREE.MeshPhysicalMaterial()

// 9-2 ドアのテクスチャの設定
material.metalness = 1
material.roughness = 1
material.map = doorColorTexture
material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1
material.displacementMap = doorHeightTexture
material.displacementScale = 0.1
material.metalnessMap = doorMetalnessTexture
material.roughnessMap = doorRoughnessTexture
material.normalMap = doorNormalTexture
material.normalScale.set(0.5, 0.5)
material.transparent = true
material.alphaMap = doorAlphaTexture

scene.add(material)

参考資料

Three.js Journey

まとめ

今回はマテリアルの種類について紹介しました。個人的にMeshToonMaterialが某ゲームに似ているので好みでした。

なんちゃって程度に設定についても記載しましたが、組み合わせることでもっといろんなものを表現できるのでぜひやってみてください! 無限の可能性あり。

見た目を確定するための超重要な要素になるので、より深く理解できるように引き続き勉強していきたいです!

次はより実践的にパーティカルを用いたアニメーション実装か、Blander等で作ったものをThree.js上にもってくるかのどちらかに挑戦してみようと思います!

新卒採用募集中!
LIGは、Webデザインからグローバルなシステム開発まで、幅広い分野のコンサルティングから制作、運用までおこなう企業です。

  • 日本・フィリピン・ベトナムでの活躍チャンス
  • 最先端技術と多言語環境での成長
  • 有識者による月1回の勉強会

現在、海外拠点(フィリピン、ベトナム)に関われるエンジニアを募集しています。日本だけじゃなく世界で活躍することに興味のある方は、以下よりぜひご応募ください!

新卒採用ページへ

この記事のシェア数

フロントエンドエンジニアとして主に大手メーカーのWebサイト制作・保守業務を担当。JS、React、Nextのフレームワークに関しての深い知見を持つ。中学時代からIT分野に興味を持ち、高校でWebプログラミングの基礎を学ぶ。専門学校卒業を経て2024年に新卒入社。

このメンバーの記事をもっと読む
LIG新卒ブログ【2024】 | 22 articles
10年以上の開発実績があるLIGが、最適な開発体制や見積もりをご提案します
相談する サービス詳細を見る