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(面光源)について見ていきたいと思います。

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(面光源)について扱いたいと思います。

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(スポットライト)についてお伝えします。

three.jsのすすめ – DirectionalLight(無限遠光源)の使用

前回は、three.jsで利用できる光源の中から、シーン内のすべての物体を一律に照らすAmbientLight(環境光)についてお伝えしました。今回は、光源第二弾としてDirectionalLight(無限遠光源)についてご説明いたします。

DirectionalLightは、太陽光のように、非常に遠いところから光を照らしているようにふるまう光源です。そのためシーンに対し平行に光線が入り、物体の位置によらず影の形が決定されます。また、光源からの距離によって光が減衰することはありません。

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

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

ご覧の通り、立方体の上部のみ照らされていることがわかります。環境光も設定していないので、横や下には光が全く当たらず、真っ黒になってしまっています。これは、光源の位置の初期値が(0, 1, 0)(シーンの真上)で、原点(0, 0, 0)に向かって光が照らされているためです。光の照らす角度を変えるには、以下のように光源のpositionプロパティ(Vector3オブジェクト)を変更します。

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

立方体のそれぞれの面への光の入射角が異なるため、このように陰影が付き、立方体であることが認識できます。このように、three.jsで物体を描画する際、光源を正しく設定することが非常に重要であることが分かります。

また、前述のようにDirectionalLightは光の減衰を起こさないため、positionを原点より遠ざけても立方体の各面の色合いは変わりませんし、光線が平行にシーンに入ってくるため、上の立方体を横に同じ向きに並べた場合、二つの立方体の同じ面の色合いは常に同じとなります。

先ほど、光は原点(0, 0, 0)に向かって照らされると述べましたが、この対象はtargetに設定してあるObject3Dオブジェクトのpositionプロパティを操作することで変更することができます。この際、targetオブジェクトは光源とは別にシーンに追加する必要があります。

その他に変更可能なプロパティとしてcashShadowがあります。このプロパティをtrueにセットすると、物体が光を遮ることによってできる影を作ることができます。

最後になりましたが、コンストラクタの引数は、AmbientLightと同様、光源の色(color)と強度(intensity)の二つだけです。ただし、今回の例のように省略が可能で、その場合、デフォルト値としてcolor = 0xffffff(白)、intensity = 1が設定されます。

以上、DirectionalLightの使い方を見てきました。AmbientLightに比べると変更できるプロパティも多くやや複雑ですが、より実体に近い演出ができるようになることが分かります。次回は、点光源であるPointLightについて見ていきたいと思います。