Feat/add-iframe-support

[DevStarlight]

Description

This PR introduces a new UIIframe component that enables web content embedding within Hyperfy worlds. The component allows for seamless integration of external web content while maintaining the Hyperfy UI system's styling capabilities and flexibility. It supports customizable styling options like background color and border radius, and includes security features through sandbox attributes.

Type of change

• New component
• Documentation update

How Has This Been Tested?

Please describe your tests:

• Component functionality tests
  • Tested iframe rendering and positioning
  • Verified styling properties (background, border radius, etc.)
  • Tested sandbox attribute functionality
• Integration tests with other Hyperfy components
  • Tested as child of UI component
• World integration testing
  • Tested embedding website
  • Verified responsive behavior

Test Configuration:

• Hyperfy Version: latest
• Test world setup: Basic world with UI and iframe components
• Browser(s): Chrome, Firefox
• Node.js version: 22.11.0

Checklist:

• My code follows Hyperfy's component architecture
• I have performed a self-review
• I have documented the component's usage in docs/ref/UIIframe.md
• I have tested the component in multiple scenarios
• My changes maintain compatibility with existing worlds
• I have updated the component documentation

[Innkeeping]

oh nice. Would like to see this in action. Have been playing with uihtml, ui-iframe component as well.

[ashconnell]

Thanks @DevStarlight but i have a few concerns here. All of the UI nodes we currently have are drawn to a canvas that can be displayed in world or screen space. This PR adds a uiiframe node that isn't compatible in the same way. We can't draw iframes to a canvas and they won't work in world space.

I think the best direction for this would be to do similar with what we did in v1, by having a webview node and properties to flip whether it is in world space or screen space. This would have to be independent of the UI node paradigm.

For world space, we would need to use three's CSS3DRenderer to position the iframe behind the WebGL canvas and use a mask/punch-out area so that the iframe shows through it.

Also worth noting that iframes don't work in WebXR.