How to create cube revealing video effect

Questions
,
1

Hello guys, I am trying to recreate cube revealing video effect from the link and video.

I made cube in 3js, and made animation with scaling rotating and inclining it forward the screen.

Next step is showing video inside of cube (contained), so more the cube is scaling up, more of the video is visible, cube is being used as some kind of mask and anything outiside of the cube is not visible.
I tried to make it as some kind of css mask but it is not working. I belive answer is also in THREE.js.

I would be really generous if someone could write few lines of how to do it, if it is not to hard to explain in sentence or two.

Thanks

1 Like
2

One way is to have two layers:

  • bottom layer has your primary animation – either a video or a Three.js animation or whatever
  • upper layer is white background with black shape for the see-through area and CSS mix-blend-mode set to lighten

I tried with with Three.js animation of spaceship in the bottom layer and Three.js animation of rotating cube in the upper layer. Here is the result:

5 Likes
3

Tried to compute UVs from projected coords of vertices.
Looks not that good, but it was fun to make this example :slight_smile:

Picture:

изображение
изображение1132×852 46.7 KB

Demo: https://codepen.io/prisoner849/full/LEpqoKz

PS Patched material will give way better result

4 Likes
4

Thanks guys a lot, I will try solutions :saluting_face:

1 Like