Three.js 动画对象上的阴影 grainly/artifacty

Question

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

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

无论怎么玩阴影 mapSize 或 shadowBias 似乎都无法解决这个奇怪的问题 grainyness/artifacting 我在动画网格阴影上看到了。

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

Answer 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
});

Answer 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
});

Three.js 动画对象上的阴影 grainly/artifacty

Three.js shadows grainly/artifacty on animated object

three.js

react-three-fiber