影を描画する
リアルタイム3DCGでリアルな表現をさせたかったら、誰もが影をまず描画させたいと思うはずです。
本来なら必ずShader言語を記述しライトの位置から深度情報をレンダリングして、影を描画する場所の判定などをしなければいけません。
ですがThree.jsはその点凄く便利！フラグを何個か立てるだけで影の描画ができてしまいます。(!!!)
いや～Three.jsって便利ですねぇ～
順序
Rendererの設定
var renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
Lightの設定
var light = new THREE.DirectionalLight(0xffffff, .8);
light.castShadow = true;
light.shadowMapWidth = 1024;//影の描画用テクスチャの横解像度
light.shadowMapHeight = 1024;//影の描画用テクスチャの縦解像度
light.shadowCameraNear = 1; //四角錐台の上面の位置
light.shadowCameraFar = 30; //四角錐台の下面の位置
light.shadowCameraLeft = -10; //描画範囲左範囲
light.shadowCameraRight = 10; //描画範囲右範囲
light.shadowCameraTop = 10; //描画範囲上範囲
light.shadowCameraBottom = -10; //描画範囲下範囲
影を描画したいMeshの設定（キャラクターや、木など）
var mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
影を落とす対象のMeshの設定（地面など）
var mesh = new THREE.Mesh( geometry, material );
mesh.receiveShadow = true;
以上です！！！！
注意点 (^o^)/
メッシュやカメラの倍率がでかすぎると、影が描画されているにもかかわらず、画面内に表示されないことがあります。
なので、もし影が表示されないときはカメラやメッシュの倍率・サイズを小さくしてみたりしてみてください。
これは本当にあるあるです。
