Render an iframe onto a world-space plane

The goal is to create an element that displays an iframe and floats in 3D space (non-interactable)

Currently I have a .js script attached to a 3D plane - however nothing is showing up. If anyone can point me in the right direction it would be much appreciated

Project: https://playcanvas.com/project/664386/overview/247-tv

Iframe = <iframe src="https://player.twitch.tv/?channel=disrupty2k38" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe><a href="https://www.twitch.tv/disrupty2k38?tt_content=text_link&tt_medium=live_embed" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px; text-decoration:underline;">Watch live video from disruptY2K38 on www.twitch.tv</a>

Hi @Jak_Wilmot and welcome!

Unfortunately there isn’t any way, that I know of, to render DOM elements in 3D space.

To add HTML to the DOM, for building UIs you can check this manual page:

https://developer.playcanvas.com/en/user-manual/assets/html/

Plus this example project:

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

1 Like

Tbh if I were you I would put tht iframe on another code editor like codepen or stackblitz and just iframe that webpage then do what @Leonidassaid and use the playcanvas ui system.