Javascript 在Three.js中渲染阴影的性能

我正在使用Three.js处理一个minecraft项目，在渲染阴影时遇到了性能问题

以下是演示：

正如你所看到的，FPS下降到30以下，如果你在这个页面上停留的时间更长，它会继续下降

---

我认为这有点奇怪，因为这种阴影渲染比例对于GPU来说应该很容易，对吧？

正如Don所说，您正在渲染循环中创建新的网格和材质。
特别是天空是如何生成的。
真正的罪魁祸首可以通过Chrome devtools看到，这似乎是在使用贴图（每帧生成一幅画布）创建新材质时，新贴图/纹理随后上传到GPU（附屏幕截图）。
解决问题的方法可能是：

• 不要每帧创建新网格
• 不要在每个帧中创建新材质
• 不要每帧为材质创建一个新画布，也可以在着色器中执行此颜色操作

Devtools屏幕截图：

编辑：

---

看看

您是否在没有阴影的情况下测试了此功能，以确定这就是问题所在？看起来您正在每个帧上创建新的网格和材质，这可能是一个更可能的原因。此问题仅限于链接，复制代码仅作为链接包含。链接现在已经腐烂了，这个问题再也没有意义了。@Suma link更新：）很高兴听到这个消息。然而，问题应该在其主体中包含必要的代码，而不是作为链接项目。如果代码对于问题来说太大，那么应该减少。如果你不介意的话，这意味着这个问题不太可能对任何人有帮助，但你和我建议应该关闭并删除它。