如何在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;

谢谢你

- chitzui

---

不是这样的，你需要使用像素着色器来完成它。 - Blindy

如果您的灯光是静态的，您可以烘焙阴影。请参见http://threejs.org/examples/webgl_materials_lightmap.html。 - WestLangley

Answer 1

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

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

- Slakinov

Answer 2

我也对此很好奇，因此我尝试使用所有可能的变量进行测试。第一个真正的更改是在初始化时进行的：

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（颜色），1.75（近平面应该在2以下），1000（远平面只是光线/地板之间的范围）); 当我将我的定向光位置设置为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 );

如果您看到自己的灯光框，那么它应该最大化到场景宽度本身。希望能对某些人有所帮助。

- Roland

Answer 3

你现在看到的是称为环境阴影的东西。已有一些内容可以查看，现在你知道该搜索什么，可能会找到更多。例如：threejs中的环境阴影。

- Hectate

Answer 4

实际上，那并不是环境光遮蔽。AO只是两个非常接近的网格之间的接触阴影。您要寻找的是软阴影，有两种方法可以得到它们：

第一种，更容易：在用于创建模型的3D软件中创建光照贴图。也就是将阴影（如果需要，还有环境光遮蔽和纹理和材质）烘焙到一个纹理中，稍后可以在ThreeJS中使用。但是：您将无法稍后移动这些对象...或者更好地说，您将能够移动它们，但它们的阴影将保留在烘焙光照贴图时所投射的对象中。

另一种方法是像在此示例中所做的那样做某事，但不幸的是我还没有能够完成它，也不太了解它: http://helloracer.com/webgl/ 祝你好运！问候。

编辑：抱歉...第二个选项，那个有F1赛车的选项，仍然是一个光照贴图 :( 但那个阴影是跟随车子移动的，所以最终效果还是很好的。这里展示了使用的阴影，全部都是预先计算好的，不是实时计算的： http://helloracer.com/webgl/obj/textures/Shadow.jpg

- RayJaKen

---

我同意AO不是OP正在寻找的，这是两个好建议，但第二个选项的链接已经失效了。 - Hugheth

Answer 5

我认为drei是软阴影的好解决方案。

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

- Bun Wong

---

这不能算作一个答案。你应该把它发表为评论。 - user14063792468