読者です 読者をやめる 読者になる 読者になる

のぐそんブログ

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

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

three.jsのライトについて

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

【ライト追加前】

【ライト追加後】

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

ライトの追加方法

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

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

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

ライトの種類

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

平行光源とは、無限に遠いところからシーン全体に降り注ぐ光の光源のことです。

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

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

THREE.DirectionalLight ( hex, intensity )

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

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

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

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

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

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

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

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

スポットライト

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

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

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

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

まとめ

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

参考

Three.jsの基本⑤