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);
地面などの影を受けるオブジェクトは、「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);
③光源(ライト)の位置
個人的に一番やるのが、光源の位置です。
例えば、光源の位置より、はるか上にオブジェクトを作成したら、オブジェクトの影は出来ません。
こんな感じに。「緑色の立方体」の位置が光源の位置です。
ピンク色の地面に影は出来ていません。
適切な位置に光源を変更すると、影は描画されます。
アクセス傾向をみると、影に関することが最近多かったので、今回のような記事を書いてみました。
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!
あ!今日、久しぶりに週刊アスキーを買いました(笑)
光るUSBケーブルいいですね~(笑)