Three.jsの基本⑤

今回は、Three.jsのLight（ライト,光源）について、やりまーす。

「introduction.html」では、この部分が光源の処理をしている所です。

/*----------------ライト（光源）関数の定義④--------------*/ 
  var light, light2; //グローバル変数の宣言                                                
  function initLight() {                               
    //平行光源オブジェクト(light)の設定         
    light = new THREE.DirectionalLight(0xcccccc,1.6);             
    //平行光源オブジェクト(light)の位置
　　light.position = new THREE.Vector3(0.577, 0.577, 0.577);     
    //影をつける 
　　light.castShadow = true;    
　　//sceneに平行光源オブジェクト(light)を追加                               
    scene.add(light);                                          
    
 　 //環境光オブジェクト(light2)の設定　
    light2 = new THREE.AmbientLight(0x333333);
    //sceneに環境光オブジェクト(light2)を追加                
    scene.add(light2);                                      
  }
 /*----------------ライト（光源）関数の定義④--ここまで--------*/ 

まず、はじめにThree.jsの光源は「平行光源」,「点光源」,「スポットライト」,「環境光」の４種類あります。（一応、他にもあるようですが、使い方がイマイチ分かりにくいので今回は割愛します。）

では、「平行光源」,「点光源」,「スポットライト」,「環境光」を個別に見ていきます。

・平行光源
特徴は、光の照射角が物体の位置座標によらないというところです。また、シェーディングのための演算が簡単なので、処理が軽い所です。

平行光源コンストラクタ

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

例:

 //光の色:0xcccccc,光の強さ:1.6
  light = new THREE.DirectionalLight(0xcccccc,1.6);   

実行例：

・点光源
特徴は、全方位に光を発することができる光源です。
影を描写することが出来ない。

点光源コンストラクタ

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

例:

 //光の色:0xcccccc,光の強さ:2.0 , 光源からの距離による減衰係数: 0
  light =  new THREE.PointLight(0xcccccc,2.0,0);  

実行例：（あまり違いが分かりにくい写真ですね・・・）

・スポットライト
特徴は、１点を中心に光を当てることができます。

スポットライトコンストラクタ

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

例：

 //光の色:0xcccccc,光の強さ:2.0 , 光源からの距離による減衰係数: 0 ,範囲角:Math.PI/4,減衰指数1
   light = new THREE.SpotLight(0xcccccc, 2.0, 0, Math.PI/4, 1);

実行例：

・環境光
特徴は、光が当たっていない所も明るくできます。なので、真っ暗にならないようにすることが出来ます。
基本的には、「環境光」+「他の光源」という使い方が普通です。これを単独で使う事は少ないです。

環境光コンストラクタ

//hex:光の色(16進数) 
THREE.AmbientLight ( hex )

例:

//光の色：0x333333
light = new THREE.AmbientLight(0x333333);  

実行例：（平行光源+環境光）

光源の個別解説は、ここで終わりです。疲れた（笑）

個人的にですが、「環境光」+「平行光源」という使い方が一番使いやすいです（笑）

さて次に、光源の位置設定です。
やり方は複数あり、こんな感じです。

light.position.set(0,50,0);

light.position.x = 0;
light.position.y = 50;
light.position.z = 0;

light.position = new THREE.Vector3(0, 50, 0); 

どれも同じです。好きなやり方で、設定してください。

そして、最後に光源をsceneに追加です。

 scene.add(light);  

これをやらないと、光源が描画されないで気をつけてください。（sceneについては、こちらを御覧ください。）

今回は、コレで終わります。
次回は、箱や球体オブジェクトについてやります。

お疲れさまでした！

---

前回　　　　　次回