💡

【three.js】ライトの種類まとめ

2022/05/05に公開

AmbientLight

シーン全てのジオメトリに全方位から均等に照明をあてる。色と強さを指定
全体的に明るくしたい時に使う。ただし影はできないので基本的に他のライトと併用する

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)

太陽光のようなもの。1方向から照らす

const directionalLight = new THREE.DirectionalLight(0xa09e5f, 0.5)

AmbientLightとの併用

上から照らす色と、下から照らす色、それぞれ指定できる
第一引数が上からの色、第二引数が下からの色、第三引数が強さ

const hemisphereLight = new THREE.HemisphereLight(0x507fff, 0xd0e040, 0.3)

AmbientLightとの併用

電球のようなもの。光源は小さく、全方向を照らす

const pointLight = new THREE.PointLight(0xffffff, 0.5)
pointLight.position.set(2, 3, 4)

AmbientLightとの併用

光る板のようなイメージ。一定の方向を照らす
一引数は色、第二は強さ、第三はエリアライトの幅、第四はエリアライトの高さ

下から照らしてみる

const rectAreaLight = new THREE.RectAreaLight(0x507fff, 2, 3, 3)
rectAreaLight.position.set(0, -0.5, 0)
rectAreaLight.rotation.x = Math.PI * 0.5

AmbientLightとの併用

エリアライトは下から上に向かって照らしているので
下の板に光が当たっていないことが確認できる

名前の通りスポットライト
光源から広がるように前方を照らす
引数は、色、強さ、照らす距離、アングル（角度）、輪郭のボケ具合(0~1でデフォルトは0)、ライトの距離に沿ってライトが暗くなる量(?)

const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)

AmbientLightとの併用

ライトが多いほど計算量が増え負荷になるので最小限にする

3DモデルはBlender等でテクスチャにベイクしてしまう手もある◎