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

Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

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の光源は「平行光源」,「点光源」,「スポットライト」,「環境光」の4種類あります。(一応、他にもあるようですが、使い方がイマイチ分かりにくいので今回は割愛します。)

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

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

平行光源コンストラクタ

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

例:

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

実行例:
f:id:gupuru:20131122171001p:plain

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

点光源コンストラクタ

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

例:

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

実行例:(あまり違いが分かりにくい写真ですね・・・)
f:id:gupuru:20131122172930p:plain

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

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

/* 
   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);

実行例:
f:id:gupuru:20131122174445p:plain

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

環境光コンストラクタ

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

例:

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

実行例:(平行光源+環境光)
f:id:gupuru:20131118195702p:plain

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

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

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

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については、こちらを御覧ください。

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

お疲れさまでした!


前回     次回

広告を非表示にする