web - Epic Games 如何在他们的 Fortnite 网站上实现这种 3D 效果？

Question

我一直在查看 Epic Games 的Fortnites 网站，并试图弄清楚他们是如何在页面上实现 3D 效果的：

Epic Games 的 Fortnite 网站 - 向下滚动到第三张幻灯片

有谁知道怎么做？我真的很想要类似于我正在从事的项目的东西。我找到了 Three.js，但我很确定这不是他们采用的解决方案。

Answer 1

对于这些类型的问题，我只能建议安装spector.js并自己看看。简而言之：你看到的一切都是 100% 伪造的。

我的意思是，情况总是如此。事实上，如果你想构建这样的东西，你的第一个问题应该是：我可以伪造多少并且仍然可以逃脱？

在这个例子中，事实证明：一切。只需打开 devtools 并单击网络选项卡中的所有资产。你会发现这两种纹理：

看起来很熟悉，对吧？

所以他们似乎正在做的是他们正在使用带有一些自定义着色器的three.js来处理翻译、灯光的闪烁和突出显示。这些效果是使用法线贴图和一个额外的蒙版纹理计算的，我不太清楚它的作用。但同样，如果您查看 spector.js 中的场景，您可以看到用于每个绘制调用的着色器。

唯一稍微复杂一点的是左下角的小机器人朋友。但同样，它不是像网格等那样的 3d，而是一组运行骨骼动画的平面纹理四边形。

毕竟，我认为这使它成为一个非常棒的网站。

鉴于史诗正在构建虚幻引擎，我怀疑原始渲染是在那里完成的。我同意，灯光看起来真的很棒:)

Answer 2

这是一个使用动画精灵表的简单视差效果。

视差效果是通过在不同的 Z 深度上使用多层图像/视频来实现的。

您可以通过使用mousemove事件跟踪光标来实现移动部分。