はじめに
みなさんは、Three.jsで照明をいい感じにしたいと思ったことはありますか？
この記事では、Three.jsを使って、照明・ライティングの種類について紹介しようと思います。
AmbientLight
シーン全てのジオメトリに全方位から均等に照明をあてるライトです。
const light = new THREE.AmbientLight(0xffffff, 2)
See the Pen Three.js - ambientLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
DirectionalLight
太陽のような一方方向から並行に照明を当てるライトです。
const light = new THREE.DirectionalLight(0xFFFFFF, 2)
↓ この例では、AmbientLightと併用していますが、立方体の上面だけ色が明るくなっているのは、DirectionalLightの影響です。
See the Pen Three.js - ambientLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
HemisphereLight
シーンの真上に配置されたライトです。
空の色（引数の1個目）から地面の色（引数の２個目）へと色がフェードしていきます。
const light = new THREE.HemisphereLight(0xFF0000, 0x0000FF, 2)
See the Pen Three.js - directionalLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
PointLight
電球のように、一点から全方向に照明を当てるライトです。
const light = new THREE.PointLight( 0xff0000, 5 )
light.position.set(1.1, 1.1, 1.1) // ライトの位置調整
See the Pen Three.js - hemisphereLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
RectAreaLight
窓やストリップ照明のように、平面から照明を当てるライトです。
一引数は色、第二は強さ、第三はエリアライトの幅、第四はエリアライトの高さを指定します。
const light = new THREE.RectAreaLight( 0xffffff, 1, 10, 10 )
light.position.set(1.1, 1.1, 1.1) // ライトの位置調整
rectLight.lookAt( 0, 0, 0 ) // ライトの向き調整
↓この例だと、PointLightとの違いは分かりにくいですが...
See the Pen Three.js - pointLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
SpotLight
光から離れるほど大きくなる円錐に沿って、一方向の一点から照明を当てるライトです。
引数には、色・ライトの強さ・ライトの範囲・光の角度・輪郭のボケ具合・光が距離によって減衰する量を受け取ります。
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 ) // ライトの向き調整
See the Pen Three.js - rectAreaLight by degudegu2510 | Qiita (@degudegu2510) on CodePen.
まとめ
この記事では、Three.jsを使った、照明・ライティングの種類について紹介しました。
ぜひこの記事を参考にライティングにこだわってみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。