Hubs-Foundation / hubs

Duck-themed multi-user virtual spaces in WebVR. Built with A-Frame.
https://hubsfoundation.org
Mozilla Public License 2.0
2.13k stars 1.41k forks source link

In-room interactive iframe / webpage #5671

Open NigelRidderhof opened 2 years ago

NigelRidderhof commented 2 years ago

Is your feature request related to a problem? Please describe. At the moment, when you want to integrate a webpage or maybe a custom mini-game made in a seperate page, we need to embed those in a modal / dialog box using an iframe. Which is very flat and does not merge well with the 3D immersiveness of the rest of the Hubs experience.

Describe the solution you'd like An interactive iframe / webpage within the 3D room. A component like the video f.e. that you can import into a room but them being able to use the website that is within the frame. Without needing to open a flat pop-up.

Describe alternatives you've considered I looked around and found this experimental branch for iframes: https://github.com/mozilla/hubs/tree/feature/iframes. I've tried to implement this in our code, and I think I succeeded. But also in this case, you can only interact with the iframe / website by opening it in the object viewer in this case (hover + F). So it is still flat and pretty much the same as how we've been doing this ourselves.

In this experiment, you dó see the first frame of the website in the 3D element, though. And if you open the viewer, scroll for example, and then leave the viewer again -> you see that you scrolled on the 3D element. Which is already something I guess.

I personally think this could add a lot of possibilities to our Hubs experiences while obeying the 3D / immersive aspect of Hubs, so me and my colleagues hope this get's picked up! :)

emclaren commented 2 years ago

This is an exciting possibility, and we've done some early explorations into this on our team. There are some potential security risks involved with this, so we need to be mindful of this as we build it out. While this isn't on our immediate roadmap, its definitely something that would be exciting to have in Hubs in the longer term.

if people have other use cases for this, I would certainly love to hear them. This would help us figure out how to prioritize this work vs other enhancements.

nielsswinkels commented 2 years ago

I experimented with using hubs as a digital twin of our office space. The feature I would like is to be able to display live/real-time data. We have webpages that can do this, but adding a webpage into hubs only shows what it looks like when it is first loaded, they don't keep running (refreshing data with JavaScript) like in a normal browser. (Might not be exactly the same request as the original post here?)

user074 commented 1 year ago

I tested with students and teachers so received some feedbacks. It would be great for collaborative work for the in room iframe webpage, so everyone can make adjustments on it. Collaborative software such as google doc, miro, jamboard, replit etc are used. If it is possible to have an interactive webpage in the room it can have the collaboration without leaving the hub.

LangDaoAI commented 1 year ago

the feature +1 for displaying live/real-time data !

SFidea commented 1 year ago

the feature +1 for displaying live/real-time data !

igorguida commented 1 year ago

We also need the ability to navigate a website because we work with children and they need to be able to push button and so on also little small games that we use we would like to let them to play with the seme logical/stem gams inside the room

dirkarnez commented 2 weeks ago

it should be z-index conflict between the scene's user input system and iframe, i have did a much minimal iframe feature for loading videos based on this branch (https://github.com/mozilla/hubs/tree/feature/iframes) , but when i set z-index to 0 to iframe layer, the user input system works weirdly (especially mouse input). I guess it is related the aframe or Hubs' codes around it because three's official example has no issue on mouse input when embedding https://threejs.org/examples/?q=3d#css3d_youtube