three.jsのすすめ – 光源の設定

前回までは、描画される画面は真っ黒でした。それもそのはずで、three.jsにおいて重要なオブジェクトである光源がシーンに設定されていなかったからです。光源を設定すると、シーン全体を明るくしたり、物体に陰影をつけたりすることができます。

光源の種類

three.jsでは以下の光源が利用できます。

AmbientLight(環境光) 特定の方向を持たない光源で、シーン内の物体をその形状に関わらず一様に照らします。そのため、影も作りません。他の光源と組み合わせて用いられることが多いです。
DirectionalLight(無限遠光源) 太陽光のように、非常に遠いところから光を照らしているようにふるまう光源です。そのためシーンに対し平行に光線が入り、物体の位置によらず影の形が決定されます。また、光源からの距離によって光が減衰することはありません。
HemisphereLight(半球光源) 空から照らされる光と地面から反射する光を表現するための光源です。屋外にいるような演出をするために利用されます。影は作りません。
PointLight(点光源) 電球のように一点からすべての方向に光を発する光源です。影は作りません。
RectAreaLight(面光源) ディスプレイのような長方形の面から光を発する光源です。
SpotLight(スポットライト) 文字通りスポットライトのように、一点から円錐状に光を発する光源です。

シーンへの追加

光源をシーンに追加するには、光源オブジェクトを作成して、シーンオブジェクトにaddするだけです。例えば、環境光を追加するには、以下のようなコードを作成します。

 

以上のように、three.jsでは様々な光源が用意されており、その利用の仕方はとてもシンプルです。また、複数の光源を組み合わせることで、より現実に近い空間を表現したり、この世に存在しないような不思議な演出を行うことができます。次回からは、個別の光源について、より詳細に見ていきたいと思います。


“three.jsのすすめ – 光源の設定” への1件の返信

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