🖼

【three.js】マテリアルの種類まとめ

2022/05/05に公開

JavaScript

WebGL

Three.js

tech

MeshBasicMaterial

一番基本的なマテリアル

const colorTexture = textureLoader.load("/texture/albedo.jpg")
const material = new THREE.MeshBasicMaterial({map: colorTexture})

alphaMapを指定する場合(今回のテクスチャにはalphaMapがないのでmetalicで代用)

material.transparent = true
material.alphaMap = metalicTexture

使用テクスチャはこちら

MeshNormalMaterial

法線ベクトルをRGBカラーにマッピングするマテリアル
反射や屈折の計算などに使用できる

const material = new THREE.MeshNormalMaterial()

MeshMatcapMaterial

テカリを再現するマテリアル
球体のように見えるテクスチャを用意する必要がある

法線の方向に従ってテクスチャ上の色を選択してくれる
テカリの位置にカメラに向きは関係ない

const material = new THREE.MeshMatcapMaterial()
const matcapTexture = textureLoader.load("/texture/matcap.jpg")
material.matcap = matcapTexture

使用テクスチャ
https://github.com/nidorx/matcaps

MeshDepthMaterial

カメラのnearの値に近い部分が白、farの値に近い部分が黒になる。
ホラーゲームの廊下とかに使えるのかな？用途が分からない

const material = new THREE.MeshDepthMaterial()

MeshLambertMaterial

ライトを使用する最も性能の良いマテリアル。
MeshBasicMaterialとほぼ一緒

const material = new THREE.MeshLambertMaterial()

MeshPhongMaterial

MeshLambertMaterialとほぼ同じ。
MeshLambertMaterialよりパフォーマンスは悪いが、問題のあるレベルではない。
shinineess（光沢）とspecular（反射）を調整できる。

const material = new THREE.MeshPhongMaterial()
material.shininess = 100
material.specular = new THREE.Color(0x1188ff)

MeshToonMaterial

デフォルトでは明るい部分、影部分の２色で色付けされる

const material = new THREE.MeshToonMaterial()

MeshStandardMaterial

MeshPhongMaterial同様にライトをサポートするが、
より現実的な荒さ(roughness)や金属度(metalness)などのパラメータもある

const material = new THREE.MeshStandardMaterial()
material.metalness = 0.45
material.roughness = 0.3

テクスチャの指定もできる

material.roughnessMap = roughnessTexture
material.bumpMap = heightTexture
material.metalnessMap = metalicTexture
material.aoMap = ambientOcclusionTexture
material.normalMap = normalTexture

before

after

Environment map

環境マップ。オブジェクトの反射の写り込みに使用する
またライティング情報としても利用する
three.jsではキューブ型の環境マップのみをサポート

const cubeTextureLoader = new THREE.CubeTextureLoader()
const environmentMapTexture = cubeTextureLoader.load([
  '/texture/cubemap/posx.jpg',
  '/texture/cubemap/negx.jpg',
  '/texture/cubemap/posy.jpg',
  '/texture/cubemap/negy.jpg',
  '/texture/cubemap/posz.jpg',
  '/texture/cubemap/negz.jpg'
])
material.envMap = environmentMapTexture