在three.js 中创建非常柔和的阴影？

Question

是否可以在three.js 中创建一个非常柔和/非常微妙的阴影？喜欢这张照片吗？

到目前为止我所做的一切是这样的：

我的灯：

hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, 0.9);
ambientLight = new THREE.AmbientLight(0xdc8874, 0.5);
shadowLight = new THREE.DirectionalLight(0xffffff, 1);
shadowLight.position.set(5, 20, -5);
shadowLight.castShadow = true;
shadowLight.shadowCameraVisible = true;
shadowLight.shadowDarkness = 0.5;
shadowLight.shadow.camera.left = -500;
shadowLight.shadow.camera.right = 500;
shadowLight.shadow.camera.top = 500;
shadowLight.shadow.camera.bottom = -500;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 1000;
shadowLight.shadowCameraVisible = true;
shadowLight.shadow.mapSize.width = 4096; // default is 512
shadowLight.shadow.mapSize.height = 4096; // default is 512

并渲染：

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

感谢您

Answer 1

我对此也很好奇，所以我尝试了我发现的所有可能的变量。第一个真正的改变是在初始化时进行的：

shadowLight.shadow.mapSize.width = 2048; // You have there 4K no need to go over 2K

shadowLight.shadow.mapSize.height = 2048; //   -  || - 

然后我测试了其他东西，当我设置后：

shadowLight = new THREE.DirectionalLight(0xffffff(COLOR), 1.75(NEAR should in this case under 2), 1000 (FAR should just be the range between light/floor));当我将定向灯设置为 250 时，阴影会更加平滑：

shadowLight.position.set( 100(X just for some side effects), 250(Y over the scene), 0(Z) );

!!!!!!!!!!!!!!!!!!使用前删除(VAR)部分!!!!!!!!!!!!

然后我将此值更改为我的地板宽度的值。

d = 1000;
shadowLight.shadow.camera.left = -d;
shadowLight.shadow.camera.right = d;
shadowLight.shadow.camera.top = d;
shadowLight.shadow.camera.bottom = -d;

因为如果你使用这个：

var helper = new THREE.CameraHelper( shadowLight.shadow.camera );

并将其也放入渲染中：

scenes.add( shadowLight, helper );

...你看到你的灯箱，我认为它应该最大到你的场景宽度本身。希望它能帮助别人。

Answer 2

您可以通过如下设置半径来柔化阴影：

var light = new THREE.PointLight(0xffffff, 0.2);
light.castShadow = true;
light.shadow.radius = 8;

Answer 3

您所看到的称为环境光遮挡。已经有一些内容可供查看，并且既然您知道要搜索什么，则可能会找到更多内容。例如：Threejs 中的环境光遮挡