three.jsのすすめ – SpotLight(スポットライト)の使用

前回は、three.jsで利用できる光源の中から、一点からすべての方向に光を発するPointLight(点光源)についてお伝えしました。今回は、光源第四弾としてSpotLight(スポットライト)についてご説明いたします。

SpotLightは、文字通りスポットライトのように一点から円錐上に光を発する光源です。光の方向と広がる角度を指定することができ、また物体に影を落とすことができます。

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

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

このSpotLightは、画面手前右上から原点に向けて光を当てています。円錐状に光線が発せられるため、PointLightと同様、立方体上の同じ面でも位置によって差し込む光の角度が異なり、色に濃淡ができているのが分かります。

コンストラクタの引数は、今まで登場したcolor、intensity、distance、decayに加えて、円錐の広がる角度を指定するangleとスポットライトの対象の中心から外側向けての減衰度であるpenumbraで、すべて省略が可能です。

プロパティ 説明 初期値
color 光の色 0xffffff(白)
intensity 光の強度 1
distance 光が届く距離。0に設定すると減衰しない。 0
angle 円錐の頂点の角度。最大値はMath.PI / 2(180度)。 Math.PI / 3
penumbra 円錐の底面の中心から外側に向けての距離に応じた光の減衰度。 0
decay 光源からの距離に応じた光の減衰度。three.jsのドキュメントによると、物理的に正しい設定値は2。 1

光の方向の初期値は原点(0, 0, 0)ですが、DirectionalLightと同様、targetプロパティ(Object3Dオブジェクト)を操作することで変更することができます。

この際、targetオブジェクトをシーンに追加するのを忘れないようにします。ちなみに、tagetはシーン内のObject3Dオブジェクトであれば良いため、動くオブジェクトを指定すれば、スポットライトが犯人を追いかけるような演出が可能です。

最後に、光が当たっている物体に影を落とす効果を有効にするためには、DirectionalLightと同様に.castShadowプロパティにtrueを設定します。

以上、SpotLightの使い方を見てきました。SpotLightには、光の方向、広がり、減衰等様々な要素が存在するため、PointLight以上に扱いが難しいですが、その分動的に変化する空間を演出するのに非常に効果的だと思います。次回は、RectAreaLight(面光源)について扱いたいと思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です