Three.jsのdirctionalLightの影を最適化する

影の入れ方の最適化を確認します。

基礎～応用まで

影いれんの最初めんどくさい

Three.jsで影を作る場合、

###プロパティを設定

qiita.js

obj.castShadow = true;

を物体に設定

qiita.js

obj.receiveShadow= true;

を床に設定します。

で、出るかなと思ったら、出ない

###ライトに設定
ライトにも影を出す設定をする必要があるらしい。
いれてないリファレンスはふぁっく

qiita.js

directionalLight.castShadow = true;

で出ない

###レンダラーに設定
レンダラーにも影を出す設定をする必要があるらしい。
いれてないリファレンスはふぁっく

qiita.js

renderer.shadowMap.enabled = true;

で、人によって出る
もしくは出ない
出ても影がおかしい

###影が出る範囲を設定する

出る範囲がデフォルトで小さい場合があるので、大きくしよう

qiita.js

directionalLight.shadow.camera.right = 12;
directionalLight.shadow.camera.left = -12;
directionalLight.shadow.camera.top = -12;
directionalLight.shadow.camera.bottom = 12;

で、(0,0,0)を中心に24*24の矩形の範囲の影ができる。

###影の解像度を調整
mapサイズを設定すると影がくっきり出たりするらしい。

qiita.js

directionalLight.shadow.mapSize.width = 512;
directionalLight.shadow.mapSize.height = 512;

大きくするとくっきりした影になる。8192くらいにすると綺麗なんだけど、重くなる。2048が限度くらいの認識512に抑えれると嬉しい

##本題：影の最適化をする

・影が出る範囲を大きくすればするほど、解像度は小さくなる。
・影が出る範囲を小さくすればするほど、解像度は大きくさくなる。
つまり影が出るエリアをカメラが映してる方向に限定したい。

###確認する為にはHelperを出す。

qiita.js

var directionalLightShadowHelper = new THREE.CameraHelper(Data.directionalLight.shadow.camera);
scene.add( directionalLightShadowHelper);
var directionalLightHelper = new THREE.DirectionalLightHelper( Data.directionalLight);
scene.add( directionalLightHelper);

と黄色と赤い枠みたいので照明が当たってるエリアが分かる。

影が出る範囲を

qiita.js

directionalLight.shadow.camera.right = 12+100;
directionalLight.shadow.camera.left = -12+100;

みたいにすると移動しそうだ。やる。
移動しない
left rightの意味はほぼない。普通に0を中心に動くだけ

ヘルパーを見てると中心地に向けて照明はあたり中心地に影ができ続けてる。

###照明のターゲットが存在する
照明にターゲットのパラメーターが存在している。

qiita.js

directionalLight.position.set( 300, 300, 300 );
directionalLight.target.position.set( 300, 0, 300 );

※x:300 z:300から真下(Y)に向けてdhirectionLightを当てるような設定のはず
これで照明を当てるエリアを設定できそうだ。設定。
移動しない

公式のリファレンスを見る。

Note: For the target's position to be changed to anything other than the default, it must be added to the scene using

google 翻訳

注：ターゲットの位置をデフォルト以外の位置に変更するには、次のコマンドを使用してシーンに追加する必要があります

qiita.js

scene.add( directionalLight.target );

ついに好きな位置に影のターゲットを移動できた
これでカメラが向いた方向のみに高画質な影が存在する設定ができる

ライトに設定されてるtargetを更に追加しないと変化しないとかが意味不明な感じでしたが、
なんとか実装をする事ができました。