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

【问题标题】：Create very soft shadows in three.js?在 three.js 中创建非常柔和的阴影？
【发布时间】：2017-05-03 21:20:03
【问题描述】：

是否可以在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;

谢谢你

【问题讨论】：

不是这样，你必须使用像素着色器来完成它。
如果您的灯光是静态的，您可以烘焙阴影。见threejs.org/examples/webgl_materials_lightmap.html。

标签： javascript three.js shadow

【解决方案1】：

你可以像这样设置半径来柔化阴影：

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

【讨论】：

【解决方案2】：

您正在查看的内容称为Ambient Occlusion。已经有一些东西可供查看，现在您知道要搜索什么，您可能会找到更多。例如：Ambient occlusion in threejs

【讨论】：

【解决方案3】：

我也对此感到好奇，所以我尝试了所有我发现的可能的变量。第一个真正的变化是在 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 );

...你看到你的灯箱，我认为它应该被最大化到你的场景宽度。希望它可以帮助某人。

【讨论】：

【解决方案4】：

其实那不是 Ambient Occlusion。 AO 只是彼此非常接近的 2 个网格之间的接触阴影。您正在寻找的，那些柔和的阴影，您可以通过 2 种方式获得它们：

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

另一种方法是像在这个例子中那样做一些事情，但不幸的是我还没有完成它，我对它了解不多： http://helloracer.com/webgl/

祝你好运！问候。

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

【讨论】：

我同意 AO 不是 OP 想要的，这是两个很好的建议，但第二个选项的链接已损坏

【解决方案5】：

我觉得drei是很好的软阴影解决方案

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

【讨论】：

这不能作为答案。你应该把它作为评论发布。