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

Question

我一直在关注Epic Games'Fortnites Website，我正试图弄清楚他们是如何在页面上实现3D效果的：

Epic Games' Fortnite website - scrolled down to 3rd slide

有人知道怎么做吗？我真的很喜欢类似于我正在研究的项目。我找到了Three.js，但我很确定这不是他们的解决方案。

Answer 1

For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.

I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?

In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:

looks familiar, right?

So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.

The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.

I think that makes it a really great website after all.

Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)

Answer 2

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

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

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