Three.jsで学ぶライティング

ライティングとは、光源を設置して、
各オブジェクトに対して、光をあてるという事。

オブジェクトに光が当たると、
素材によってあらゆる反射をしたうえで、我々の目まで光が届く。

オブジェクトの材質によって、光の反射の仕方が違う為、目に届いて見えるときの色合いが変化するわけだ。

オブジェクトの材質について

材質(マテリアル) は以下のものがあり。
それぞれに光の反射の仕方がことなる。

クラス名 名称 特徴
MeshLamberMaterial ランバート反射材質 マット紙のようなザラつきのある材質
MeshPhongMaterial フォン反射材質 鏡面仕上げされたような材質
MeshStandardMaterial 標準反射材質 ランバートと フォンを内包する材質で、ザラザラ感と金属感を個別に設定できる。

MeshStandardMaterial は、ランバートと フォンを内包しているため、
ザラザラ感1 (roughness=1), 金属感0 (metalness=0) にすると、ランバード反射材質と同等のものになる。
ザラザラ感0.5 (roughness=0.5)として、金属感のみ調整するとフォン反射材質と同等の扱いとなる。

光源の種類

光源となるのは、以下の4つがある。

クラス名 名称 特徴
DirectionalLight 平行光源 太陽光のような無限の彼方から一方向に降り注ぐ光を表す
PointLight 点光源 点を中心に光が放射する
SpotLight スポットライト 懐中電灯のような一部を照らす光源
AmbientLight 環境光源 全体に均等に行き渡る光

法線ベクトル

法線ベクトルとは、光が反射する方向を表したベクトルです。
ポリゴンに対して設定する事が出来ます。

そして、オブジェクトには、表と裏があります。
光を反射する面が表なわけですが、
これは法線ベクトルが表向きに既に設定されているからです。

個別に法線ベクトルを設定する事も可能。

平面オブジェクトでは、裏からみると透過して描画されますし、光も反射しません。

Three.js であらかじめ用意されているジオメトリーには、すでにこの法線ベクトルが設定されています。

もし、自分でジオメトリを作成する場合は、法線ベクトルを設定する必要があることを覚えておきましょう。

コメントを残す