【Three.js】マテリアル まとめ

## はじめに

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

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

```js
const material = new THREE.MeshBasicMaterial()
```

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

```js
const material = new THREE.MeshNormalMaterial()
```

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

```js
const material = new THREE.MeshMatcapMaterial()
```

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

```js
const material = new THREE.MeshDepthMaterial()
```

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

```js
const material = new THREE.MeshLambertMaterial()
```

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

```js
const material = new THREE.MeshPhongMaterial()
```

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

```js
const material = new THREE.MeshToonMaterial()
```

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

```js
const material = new THREE.MeshStandardMaterial()
```

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

```
const material = new THREE.MeshPhysicalMaterial()
```

## マテリアルを操作する
### テクスチャを反映する

```js
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
```

### 色をつける

```js
// ↓ こっちか
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)
```

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

```js
material.wireframe = true
```

### 不透明度を変化させる

```js
material.transparent = true
material.opacity = 0.5
```

### アルファマップを使う

```js
material.transparent = true
material.alphaMap = doorAlphaTexture
```

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

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

### 荒さを調整する
```js
material.metalness = 0.45
```

### メタルを調整する
```js
material.roughness = 0.65
```

### アンビエント・オクルージョンを調整する
```js
material.map = texture
```

### 法線マップを調整する
```js
material.normalMap = texture
```

### クリアコートを調整する

```js
material.clearcoat = 1
material.clearcoatRoughness = 0
```

### シーンを調整する

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

### 虹彩を調整する

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

### 伝播を調整する

```js
material.transmission = 1
```

### iorを調整する
```js
material.ior = 1.5
```

### 厚さを調整する

```js
material.thickness = 0.5
```

## まとめ

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

---

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

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

https://twitter.com/degudegu2510