Three.js 在动画对象上产生颗粒状阴影/伪影答案

【问题标题】：Three.js shadows grainly/artifacty on animated objectThree.js 在动画对象上产生颗粒状阴影/伪影
【发布时间】：2021-05-08 03:54:36
【问题描述】：

我正在尝试让柔和的阴影在这个动画网格测试中看起来不错

https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js

使用阴影 mapSize 或 shadowBias 似乎无法修复我在动画网格阴影上看到的这种奇怪的颗粒感/伪影。

有没有人对如何改善这些阴影有任何想法？

【问题讨论】：

标签： three.js react-three-fiber

【解决方案1】：

这个调用导致它：

softShadows({
  frustum: 3.75, // Frustum width (default: 3.75) must be a float
  size: 0.005, // World size (default: 0.005) must be a float
  near: 9.5, // Near plane (default: 9.5) must be a float
  samples: 17, // Samples (default: 17) must be a int
  rings: 11, // Rings (default: 11) must be a int
});

【讨论】：

【解决方案2】：

我最终如何改进这一点是弄乱了 softShadows drei 参数 - 主要是降低“大小”参数。它并不完美，但更好。

softShadows({
  frustum: 3.75, // Frustum width (default: 3.75) must be a float
  size: 0.002, // World size (default: 0.005) must be a float
  near: 9.5, // Near plane (default: 9.5) must be a float
  samples: 17, // Samples (default: 17) must be a int
  rings: 11, // Rings (default: 11) must be a int
});

【讨论】：