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

Yuya Nishizawa

2025.07.08

Technology

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

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

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

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

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

Three.jsで3DCGを作ろう！〜環境マッピングでツルツル鏡面球体〜

Yuya Nishizawa

2025.02.12

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

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

マテリアルとは
マテリアルの種類
参考資料
まとめ

マテリアルとは

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

マテリアルの種類

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)