Web 史诗游戏是如何在他们的Fortnite网站上实现这种3D效果的？

我一直在看Epic Games，我试图找出它们是如何在页面上实现3D效果的：

---

有人知道怎么做吗？我真的很想做一些类似我正在做的项目。我已经找到了Three.js，但我很确定这不是他们使用的解决方案。

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

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

---

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

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

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

---

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

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

我是说，情况总是这样。事实上，如果你想建立这样的东西，你的第一个问题应该始终是：我能伪造多少，并且还能侥幸逃脱

在这个例子中，结果是：一切。只需打开devtools并单击网络选项卡中的所有资产。您将发现以下两种纹理：

看起来很眼熟，对吧

因此，他们似乎正在使用three.js和一些自定义着色器来处理平移、灯光闪烁和高亮显示。这些效果是使用法线贴图和一个附加的遮罩纹理计算的，我不太清楚它的作用。但同样，如果您查看spector.js中的场景，您可以看到用于每个drawcall的着色器

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

我认为这使它成为一个真正伟大的网站

---

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

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

我是说，情况总是这样。事实上，如果你想建立这样的东西，你的第一个问题应该始终是：我能伪造多少，并且还能侥幸逃脱

在这个例子中，结果是：一切。只需打开devtools并单击网络选项卡中的所有资产。您将发现以下两种纹理：

看起来很眼熟，对吧

因此，他们似乎正在使用three.js和一些自定义着色器来处理平移、灯光闪烁和高亮显示。这些效果是使用法线贴图和一个附加的遮罩纹理计算的，我不太清楚它的作用。但同样，如果您查看spector.js中的场景，您可以看到用于每个drawcall的着色器

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

我认为这使它成为一个真正伟大的网站

---

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

对我来说就像是预渲染的背景，试试blender，但可能是因为我在手机上基于代码，他们使用的是虚幻引擎。我没有使用此引擎的任何经验，因此更改标记以解决适当的主题可能有助于更好地回答您的问题。现在，主要是视差效果，没有真正的3D效果。几年前我发现这个库对制作漂亮的视差效果非常有帮助，它也可能对你有帮助：我觉得它像是预渲染的背景，试试blender，但可能是因为我在手机上基于代码，他们使用的是虚幻引擎。我没有使用此引擎的任何经验，因此更改标记以解决适当的主题可能有助于更好地回答您的问题。现在，主要是视差效果，没有真正的3D效果。几年前我发现这个库对制作漂亮的视差效果非常有帮助，它也可能对你有所帮助：Maxymilian正在谈论一个“任务”，它可以在主页上加载。没错，主站点只是由CSS控制的一堆层，但任务内界面确实使用了虚幻引擎。没错，主站点只是由CSS控制的一堆层，但任务中的界面确实使用了虚幻引擎。哇，spector.js扩展太棒了，谢谢分享哇，spector.js扩展太棒了，谢谢分享