three.jsで影を表示するには

影を描画する

リアルタイム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^)/

メッシュやカメラの倍率がでかすぎると、影が描画されているにもかかわらず、画面内に表示されないことがあります。
なので、もし影が表示されないときはカメラやメッシュの倍率・サイズを小さくしてみたりしてみてください。
これは本当にあるあるです。