24

から影を作成することは可能DirectionalLightですか？

使用SpotLightすると影が見えますが、使用DirectionalLightしても機能しません。

4

2 に答える 2

51

シャドウマップはスケールに依存することに注意してください。単位距離が1メートルを表し、オブジェクトのサイズが約0.4メートルであるシーンに取り組んでいます。これはThree.js標準ではかなり小さいです。このような状況でもある場合は、いくつかの重要な手順を実行できます。

  • シーンの寸法を考慮して、シャドウカメラのニアプレーン/ファープレーンが適切であることを確認してください。
  • シャドウカメラの上部/左側/下部/右側の値が大きすぎないことを確認してください。大きすぎると、各シャドウの「ピクセル」が大きすぎて、シーンのシャドウにさえ気付かない可能性があります。

これを行う方法を見てみましょう。

デバッグ

ライトごとにデバッグレンダリングをオンにしてくださいCameraHelper：

scene.add(new THREE.CameraHelper(camera))

または、Three.jsの古いバージョンでは：

light.shadowCameraVisible = true;

これにより、シャドウが計算されているボリュームが表示されます。これがどのように見えるかの例です：

ニアプレーンとファープレーン（黒い十字）、およびシャドウカメラの上部/左側/下部/右側（黄色のボックスの外壁）に注意してください。このボックスは、オブジェクトを配置するときにしっかりと固定する必要があります。影—おそらくここに示しているよりもさらにきついです。

コード

役立つ可能性のあるコードのスニペットを次に示します。

var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 2, 2);
light.target.position.set(0, 0, 0);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true; // only for debugging
// these six values define the boundaries of the yellow box seen above
light.shadowCameraNear = 2;
light.shadowCameraFar = 5;
light.shadowCameraLeft = -0.5;
light.shadowCameraRight = 0.5;
light.shadowCameraTop = 0.5;
light.shadowCameraBottom = -0.5;
scene.add(light);

一部のオブジェクトが影を落としていることを確認してください。

object.castShadow = true;

一部のオブジェクトがシャドウを受け取ることを確認してください。

object.receiveShadow = true;

最後に、：にいくつかの値を設定しますWebGLRenderer。

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(canvasWidth, canvasHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
于 2013-02-24T19:11:07.403 に答える
38

はい、間違いなく指向性ライトを使用して影を落とすことができます。MeshBasicMaterialシャドウをサポートしていないため、使用していないことを確認する必要があります。MeshLambertMaterialまたはのMeshPhongMaterial代わりに使用してください。

これらの線に沿った何かでレンダラーのシャドウを有効にする必要があります。

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;

renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;

次に、オブジェクトごとおよびライトごとにシャドウキャストとシャドウ受信を有効にする必要があります。

dirLight.castShadow = true;
object.castShadow = true;
otherObject.receiveShadow = true;

次に、ライトとオブジェクトが適切な位置に配置されているかどうか。dirLightの影がobjectにキャストされotherObjectます。

[編集]：これは、似たようなことをしたいと思っている人のための実用的なデモです。

于 2012-06-05T20:44:16.973 に答える