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

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

Three.js  影ができない原因

今回は、Three.jsの「影ができない原因」を書きます。


影が出来なかった原因と簡単な対処法を書きます。

※影については、コチラを見てください↓↓
Three.js 影の描画(シャドウマッピング) - Three.jsを使って、作ってみた


影ができなかった原因は、これらが多かったです。個人的に。

①「shadowMapEnabled」,「receiveShadow」などの「書き忘れ」
書き忘れは、たまにやります(笑)書き忘れ・スペルミスなど再確認をお忘れなく。

②「castShadow」, 「receiveShadow」が適切に書かれていない
例えば、地面のオブジェクトに、「castShadow」をしていたとか。
こんな感じに。

var plane =  new THREE.Mesh(                                     
             new THREE.PlaneGeometry(1000, 1000, 10, 10),
              new THREE.MeshLambertMaterial({                         
                side: THREE.DoubleSide,                                
                 color: 0xCD5C5C                     
                }));                      
       plane.castShadow = true; 
     scene.add(plane);             

f:id:gupuru:20131216203316p:plain
地面などの影を受けるオブジェクトは、「receiveShadow = true」を書きます。

var plane =  new THREE.Mesh(                                     
             new THREE.PlaneGeometry(1000, 1000, 10, 10),
              new THREE.MeshLambertMaterial({                         
                side: THREE.DoubleSide,                                
                 color: 0xCD5C5C
                                   
                }));                      
       plane.receiveShadow = true;
     scene.add(plane);             

f:id:gupuru:20131213201626p:plain

③光源(ライト)の位置
個人的に一番やるのが、光源の位置です。
例えば、光源の位置より、はるか上にオブジェクトを作成したら、オブジェクトの影は出来ません。
こんな感じに。「緑色の立方体」の位置が光源の位置です。
f:id:gupuru:20131216210158p:plain
ピンク色の地面に影は出来ていません。
適切な位置に光源を変更すると、影は描画されます。
f:id:gupuru:20131213201626p:plain



アクセス傾向をみると、影に関することが最近多かったので、今回のような記事を書いてみました。


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!

あ!今日、久しぶりに週刊アスキーを買いました(笑)
f:id:gupuru:20131216201929j:plain
光るUSBケーブルいいですね~(笑)