【Three.js】ライトまとめ

## はじめに
みなさんは、Three.jsで照明をいい感じにしたいと思ったことはありますか？
この記事では、Three.jsを使って、照明・ライティングの種類について紹介しようと思います。

## AmbientLight
シーン全てのジオメトリに全方位から均等に照明をあてるライトです。

```js
const light = new THREE.AmbientLight(0xffffff, 2)
```

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="azoWPZe" data-pen-title="Three.js - ambientLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/azoWPZe">
  Three.js - ambientLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script></script>

https://threejs.org/docs/?q=light#api/en/lights/AmbientLight


## DirectionalLight
太陽のような一方方向から並行に照明を当てるライトです。

```js
const light = new THREE.DirectionalLight(0xFFFFFF, 2)
```

↓ この例では、AmbientLightと併用していますが、立方体の上面だけ色が明るくなっているのは、DirectionalLightの影響です。
<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="wBwexqa" data-pen-title="Three.js - ambientLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/wBwexqa">
  Three.js - ambientLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

https://threejs.org/docs/?q=light#api/en/lights/DirectionalLight

## HemisphereLight
シーンの真上に配置されたライトです。
空の色（引数の1個目）から地面の色（引数の２個目）へと色がフェードしていきます。

```js
const light = new THREE.HemisphereLight(0xFF0000, 0x0000FF, 2)
```

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="qEWjyXM" data-pen-title="Three.js - directionalLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/qEWjyXM">
  Three.js - directionalLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

https://threejs.org/docs/?q=light#api/en/lights/HemisphereLight


## PointLight
電球のように、一点から全方向に照明を当てるライトです。

```js
const light = new THREE.PointLight( 0xff0000, 5 )
light.position.set(1.1, 1.1, 1.1) // ライトの位置調整
```

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="WbeOKXx" data-pen-title="Three.js - hemisphereLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/WbeOKXx">
  Three.js - hemisphereLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

https://threejs.org/docs/?q=light#api/en/lights/PointLight

## RectAreaLight

窓やストリップ照明のように、平面から照明を当てるライトです。
一引数は色、第二は強さ、第三はエリアライトの幅、第四はエリアライトの高さを指定します。

```js
const light = new THREE.RectAreaLight( 0xffffff, 1,  10, 10 )
light.position.set(1.1, 1.1, 1.1) // ライトの位置調整
rectLight.lookAt( 0, 0, 0 ) // ライトの向き調整
```

↓この例だと、PointLightとの違いは分かりにくいですが...
<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="xbKrJay" data-pen-title="Three.js - pointLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/xbKrJay">
  Three.js - pointLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

https://threejs.org/docs/?q=light#api/en/lights/RectAreaLight

## SpotLight
光から離れるほど大きくなる円錐に沿って、一方向の一点から照明を当てるライトです。

引数には、色・ライトの強さ・ライトの範囲・光の角度・輪郭のボケ具合・光が距離によって減衰する量を受け取ります。

```js
const light = new THREE.SpotLight(0xffffff, 2, 20, Math.PI * 0.14, 0.6, 1)
light.position.set(1.1, 1.1, 1.1) // ライトの位置調整
rectLight.lookAt( 0, 0, 0 ) // ライトの向き調整
```

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="vEBZaQo" data-pen-title="Three.js - rectAreaLight" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/vEBZaQo">
  Three.js - rectAreaLight</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

https://threejs.org/docs/?q=light#api/en/lights/SpotLight


## まとめ
この記事では、Three.jsを使った、照明・ライティングの種類について紹介しました。
ぜひこの記事を参考にライティングにこだわってみてください。

---

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

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

https://twitter.com/degudegu2510