在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

您所看到的内容称为Ambient Occlusion。有几件事情可供查看，现在你可能会发现更多，你知道要搜索什么。例如：Ambient occlusion in threejs

Answer 2

我对此也很好奇，所以我找到了所有可能的变种。第一次真正的改变是在init：

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 3

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

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

Answer 4

实际上这不是环境遮挡。 AO仅是2个网格之间的接触阴影，它们彼此非常接近。 您正在寻找的是那些柔和的阴影，您可以通过两种方式获得它们：

首先，更容易：在用于创建模型的3D软件中创建光照贴图。即：将阴影（以及环境遮挡，如果需要，甚至纹理和材质）烘焙成1个纹理，稍后可以在ThreeJS中使用。但是：您将无法在以后移动这些对象...或者更好地说，您将能够移动它们，但是当您烘焙光照贴图时，它们的阴影将保留在投影它们的对象中。

另一种方式就是在这个例子中做了一些事情，但不幸的是我还没有能够完成它并且我对此并不了解： http://helloracer.com/webgl/

祝你好运！问候。

编辑：对不起......第二个选项，那个有F1赛车的选项，仍然是一个光照贴图:(但那个阴影是跟随汽车的，所以最后效果非常好。这里你有正在使用的阴影，它是全部烘焙，而不是实时计算： http://helloracer.com/webgl/obj/textures/Shadow.jpg

Answer 5

我认为drei是软阴影的一个很好的解决方案

https://github.com/pmndrs/drei#softshadows