のぐそんブログ

暗いおじさんがシコシコ書くブログです。

three.jsのライトについてのメモ

three.jsのライトについて

three.jsでは他のオブジェクトとと同じようにライトも追加することができます。

【ライト追加前】

【ライト追加後】

上記のように、ライトは明るさもですが、影の描画に大きく影響します。

ライトの追加方法

ライトのオブジェクトは下記のように追加。

 //シーンを準備
 var scene = new THREE.Scene();

//ライトを作成
 var light = new THREE.DirectionalLight(0xffffff);
 
 //シーンに追加
 scene.add(light);

ライトの種類

アンビエントライト/AmbientLight(環境光)

どの面に対しても一様に照らすライト。 ディレクショナルライトは光が当たっていない箇所が発生するが、アンビエントライトは全体を明るくする場合に使える。全体を明るくしますのでビエントライトによる影はできません。

アンビエントライトは、オブジェクトの形状に関わらず全ての面を同じ色にしてしまうので、シーン唯一の光源として利用されることはあまりないです。

シーンに色味を加えたり、影をやわらげたりするのに使用されます。

コードにすると下記になります。

//hex:光の色(16進数)
//intensity:光の強さ(float)
THREE.AmbientLight ( hex, intensity )

See the Pen GErrKx by nogson (@satofaction) on CodePen.

ディレクショナルライト/DirectionalLight(平行光源)

平行光源とは、無限に遠いところからシーン全体に降り注ぐ光の光源のことです。 太陽光のようなイメージ。

コードにすると下記になります。

//hex:光の色(16進数)
//intensity:光の強さ(float)

THREE./ ( hex, intensity )

See the Pen mwRRex by nogson (@satofaction) on CodePen.

ポイントライト/PointLight(点光源)

全方位に光を発することができる光源。電球などのイメージに近い。 ポイントライトによる影はできません。

コードにすると下記になります。

//hex:光の色(16進数) 
//intensity:光の強さ(float)
//distance : 光源からの距離による減衰係数(float)
THREE.PointLight ( hex, intensity, distance )

See the Pen gRggPj by nogson (@satofaction) on CodePen.

スポットライト/SpotLight

一点に向けて光を当てる光源。その名の通りスポットライトのような感じ。 スポットライトによる影ができる。

//hex:光の色(16進数) ,
//intensity:光の強さ(float) , 
//distance : 光源からの距離による減衰係数(float), 
//angle: 照らす範囲角の半分(単位はラジアンでMath.PI/2を越えないように), 
//exponent:指数関数的な減衰係数(多くすると中心から外側に向かってすぐ暗くなる)
THREE.SpotLight ( hex, intensity, distance, angle, exponent )
   

See the Pen jwyymN by nogson (@satofaction) on CodePen.

HemisphereLight

HemisphereLightを使用すると屋外にいるような見た目の自然なライティングを実現できます。 大気による光の散乱や、地面やその他の物体から反射されることを再現できます。

//groundColor:地面からの光の色 ,
//color:空からの光の色, 
//intensity : 光の強度, 
//position: 空からの光の向き。デフォルト値は(0,1,0)

HemisphereLight ( groundColor, color, intensity, position )
   

See the Pen zzNNNK by nogson (@satofaction) on CodePen.

LensFlare

ライトとマテリアルの関係

ライトを使用する場合はシェイプ側のマテリアルの設定にも注意が必要です。 マテリアルの中にはライトを受ける(反射できる)ことができるタイプとできないタイプがあります。

まとめ

上手くライトの描画の違いを表現できませんでした。 マテリアルとの相性とかもあるのかもしれません。

参考

Three.jsの基本⑤