Use the info menu to navigate to a site. Flip phone orientation or drag the background to position the phone as desired. Some phone buttons are clickable.
urlquery parameter can be used to specify the site to iframe.landscapequery parameter can be used to rotate the phone. This works well with Youtube embeds.
Built with @react-three/fiber.
In the future, I want to make this a more involved 3D environment built around an iframe, but satisfied for a very quick hack and my first dabble with Three.js.
Shout out Sam Osborne for the tutorial. As of initial spike, the only additive things I had to do were figure out the positioning values for the model I wanted to use and add occlusion.
TODO
- Add some info/help context (update: very basic)
- Support landscape mode
- Manage link clicks inside iframe? Many sites will be blocked (Update: Mitigated this a bit on my own website)
- Add more of an environment. interactive?
- Make this a lib. Could be used as a goofy Youtube player