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


“three.jsのすすめ – DirectionalLight(無限遠光源)の使用” への2件の返信

コメントは受け付けていません。