three.jsのすすめ – AmbientLight(環境光)の使用

前回は、three.jsで利用できる光源の種類についてお伝えしました。今回は、その中でも一番基本的な光源であるAmbientLight(環境光)について掘り下げたいと思います。

AmbientLightは特定の方向を持たない光源で、シーン内の物体をその形状に関わらず一様に照らします。そのため、影も作りません。他の光源と組み合わせて用いられることが多いです。現実世界において、壁や床などによって乱反射された太陽や電球の光が、直接当たっていない物体をほんのりと照らすような演出を行うことができます。

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

こちらのコードで描画されるイメージが以下になります。(ちなみに、AmbientLightの特徴を分かりやすくするために、前回までのコードと比較して、立方体に適用させるマテリアルをMeshLamertMaterialの赤色に、レンダラーのクリアカラーを白に変更しています。これらの詳細に関しては、また次回以降に扱いたいと思います。)

前述した通りAmbientLightは影を作らないため、これが立方体なのか判別がつきません。ここでいう影とは、物体が光を遮って物体の後方にできる影(Shadow)と、光が当たる角度によって物体の表面の濃淡の見え方が変わること(Shade?)の両方を指します。

引数は、光源の色(color)と強度(intensity)の二つだけです。色は、下の例のような16進数リテラル(0x666666)や16進数文字列(’#666666’)、Colorオブジェクト等で指定できます。

AmbientLightを利用する際は、他の光源との組み合わせを考えて、あまり白い色を指定しないようにします。例えば、真っ白(0xffffff)を与えた場合、上記のイメージは以下のようになります。

このように、立方体に指定した原色の赤が表示されてしまっているため、他の光源を設定したとしても陰影をつけることができません。

以上、AmbientLight(環境光)の使い方にについて見てきました。次回は、DirectionalLight(無限遠光源)についてお伝えしたいと思います。


“three.jsのすすめ – AmbientLight(環境光)の使用” への1件の返信

コメントを残す

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