はじめに

みなさんは、Three.jsでマテリアルを作りたいと思ったことはありますか？
この記事では、Three.jsを使ってマテリアルを紹介しようと思います！

MeshBasicMaterial

クラスはライティングを考慮しないマテリアルです。陰がつかないので均一な塗りつぶした状態になります。開発中にライティングを無視して、動作確認するときに役立ちます。

const material = new THREE.MeshBasicMaterial()

MeshNormalMaterial

ノーマルのカラーをRGBで可視化するマテリアルです。
ライティングを必要としないため、手軽に動作確認するときに役立ちます。

const material = new THREE.MeshNormalMaterial()

MeshMatcapMaterial

マテリアルの色とシェーディングを再現するマテリアルです。
球体のように見えるようにするには、テカリを反映したテクスチャを用意する必要があります。

const material = new THREE.MeshMatcapMaterial()

MeshDepthMaterial

カメラのnearの値に近い部分が白、farの値に近い部分が黒になるマテリアルです。

const material = new THREE.MeshDepthMaterial()

MeshLambertMaterial

光沢感のないマットな質感を表現できるマテリアルです。
陰がでるため奥行き感を表現できます。だだ、陰影を表現するためには、ライトが必要となります。

const material = new THREE.MeshLambertMaterial()

MeshPhongMaterial

光沢感のある質感を表現できるマテリアルです。

const material = new THREE.MeshPhongMaterial()

MeshToonMaterial

アニメのようなトゥーンシェーディングを実現できるマテリアルです。

const material = new THREE.MeshToonMaterial()

MeshStandardMaterial

物理ベースレンダリングのマテリアルです。
物理ベースレンダリングは多くの3Dアプリケーションで実装されているもので、光の反射や散乱など現実の物理現象を再現します。

const material = new THREE.MeshStandardMaterial()

MeshPhysicalMaterial

MeshStandardMaterial より、高度な物理ベースのレンダリングプロパティを持っているマテリアルです。
異方性やクリアコート、虹彩効果、物理ベースの透明度、高度な反射率、光沢がサポートされています。

const material = new THREE.MeshPhysicalMaterial()

マテリアルを操作する

テクスチャを反映する

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/image.png')

// ↓ こっちか
const material = new THREE.MeshBasicMaterial({ map: texture })

// ↓ こっち
const material = new THREE.MeshBasicMaterial()
material.map = doorColorTexture

色をつける

// ↓ こっちか
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" })

// ↓ こっち
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color('#ff0000')
material.color = new THREE.Color('#f00')
material.color = new THREE.Color('red')
material.color = new THREE.Color('rgb(255, 0, 0)')
material.color = new THREE.Color(0xff0000)

ワイヤーフレームを表示する

material.wireframe = true

不透明度を変化させる

material.transparent = true
material.opacity = 0.5

アルファマップを使う

material.transparent = true
material.alphaMap = doorAlphaTexture

マテリアルの反映させる面を設定する

material.side = THREE.FrontSide // 前面側
material.side = THREE.BackSide // 裏面側
material.side = THREE.DoubleSide // 両面側

荒さを調整する

material.metalness = 0.45

メタルを調整する

material.roughness = 0.65

アンビエント・オクルージョンを調整する

material.map = texture

法線マップを調整する

material.normalMap = texture

クリアコートを調整する

material.clearcoat = 1
material.clearcoatRoughness = 0

シーンを調整する

material.sheen = 1
material.sheenRoughness = 0.25
material.sheenColor.set(1, 1, 1)

虹彩を調整する

material.iridescence = 1
material.iridescenceIOR = 1
material.iridescenceThicknessRange = [ 100, 800 ]

伝播を調整する

material.transmission = 1

iorを調整する

material.ior = 1.5

厚さを調整する

material.thickness = 0.5

まとめ

この記事では、Three.jsを使ってマテリアルを紹介しました。
ぜひこの記事を参考にマテリアル作成にこだわってみてください。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。