three.jsのすすめ – HemisphereLight(半球光源)の使用

前回は、three.jsで利用できる光源の中から、一点から円錐状に光を発する光源であるSpotLightについてお伝えしました。今回は、光源第五弾としてHemisphereLight(半球光源)についてご説明いたします。

HemisphereLightは、空から照らされる光と地面から反射する光を表現するための光源です。屋外にいるような演出をするために利用されます。物体に影を落とすことはできません。

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

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

立方体の上面は、空から受ける白色(0xffffff)の光によって明るく照らされています。側面は、斜めに入った空からの光(上面の半分)と地面から受ける灰色(0x999999)の光の合成により、やや暗めに照らされています。

コンストラクタの引数は、skyColor、groundColorおよびintensityの三つだけです。

プロパティ 説明 初期値
skyColor 空からの光の色 0xffffff
groundColor 地面からの光の色 0xffffff
intensity 光の強度 1

また、positionプロパティを変更することで、光の向きを変更することができます。初期値は(0, 1, 0)で、positionの位置から原点(0, 0, 0)に向かう方向に空からの光が差し込みます。地面からの光はその反対です。

以上、HemisphereLightの使い方について見てきました。太陽に見立てたDirectionalLightとAmbientLightの組み合わせでは表現しきれない、屋外の様子を再現するのにとても有効だと思います。次回は、光源の最後の一つ、RectAreaLight(面光源)について見ていきたいと思います。