Portal transitions with R3F

For this project, I thought about trying to blend in multi-path experiences on the same page. My original idea was to use a stencil buffer but I checked the drei docs(a collection of helpers) and

I found a very useful MeshPortalMaterial. It also features a CSS border-trail animation.

Double click on the floating pandora’s box to enter, same to leave. Left click and hold for orbit controls.
Demo: https://immersive-world-xi.vercel.app/
Drei docs: Introduction - Drei

1 Like

Your project looks fantastic!
The floating Pandora’s box really feels like a magic cube in space. The rotation is smooth and perfect — very impressive! MeshPortalMaterial from Drei truly adds a magical touch to the experience.
Thanks for sharing the demo!

1 Like

Thank you for your kind words!