不知道如何让阴影与 react-three-fiber 一起使用答案

【问题标题】：Can't figure out how to get shadows to work with react-three-fiber不知道如何让阴影与 react-three-fiber 一起使用
【发布时间】：2021-07-12 15:11:49
【问题描述】：

我一直在学习一些教程来制作这个带有测试 .glb 文件的简单沙箱。

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

一切似乎都正常，除了阴影。我在任何地方都找不到任何丢失的 castShadow/recieveShadow/shadowMap 声明......只是不确定我错过了什么。

谢谢你指出我的错误！

【问题讨论】：

标签： three.js react-three-fiber

【解决方案1】：

将阴影贴图大小增加到如此高的值并不是一个好方法，因为它不利于性能。

相反，减少阴影相机的截锥体。使用以下值：

shadow-camera-near={0.1}
shadow-camera-far={20}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}

请记住，您可以使用THREE.CameraHelper 进行可视化调试，从而更好地优化阴影相机。

【讨论】：

嗯，我尝试在我的沙箱 directionalLight 上调整这些值，但它们没有解决无阴影显示问题。
它确实对我有用：codesandbox.io/s/cool-rain-zuzy8
哦，codeandbox 似乎并没有真正实时刷新阴影（我必须刷新输出）。所以也许这整个问题一开始就不是问题。感谢您帮助我 Mugen。

【解决方案2】：

我想通了 - 它是 shadow-mapSize-width 和 height。 1024 还不够，我不得不将这个数字提高很多（在 10240 工作）。不知道为什么会这样，也许我进口的模型是不同的规模或什么的。但是现在可以了！

【讨论】：