three.jsのすすめ – PointLight(点光源)の使用

前回は、three.jsで利用できる光源の中から、シーンに対して平行に光線を入れるDirectionalLight(無限遠光源)についてお伝えしました。今回は、光源第三弾としてPointLight(点光源)についてご説明いたします。

PointLightは、一点からすべての方向に光を発する光源です。電球のような光源を再現するのに適していますが、電球とは違い大きさがない一点から発せられること(つまり光源自体は見えない)に若干注意が必要です。また、DirectionalLightと異なり、光の減衰についても設定することができます。

それでは、実際のコードを見てみましょう。

このコードによって描画されるイメージが以下になります。

DirectionalLightとは異なり、立方体に差し込む光線が平行ではないため、同じ面でも位置によって色に濃淡があることがわかります。また、初期位置が原点(0, 0, 0)であるため、原点以外に配置する場合には、positionプロパティを変更する必要があります。

コンストラクタの引数は、AmbientLightやDirectionalLightにもあったcolorとintensityに加えて、光の減衰を定義するためのdistanceとdecayの計四つです。

プロパティ 説明 初期値
color 光の色 0xffffff(白)
intensity 光の強度 1
distance 光が届く距離。0に設定すると減衰しない。 0
decay 光源からの距離に応じた光の減衰度。three.jsのドキュメントによると、物理的に正しい設定値は2。 1

最後に、PointLightはDirectionalLightと異なり物体に影を落とすことはできません。(.castShadowプロパティがない)これは、PointLightが全方位に光を発するため、影の計算コストが非常に高いからということのようです。

以上、PointLightの使い方を見てきました。今までご紹介した光源にはなかった光の減衰という概念が加わったため、より扱いが難しくなりますが、特に屋内の様子を再現するのにとても有効な光源だと思います。次回は、SpotLight(スポットライト)についてお伝えします。