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: PlayCanvas 3D HTML5 Game Engine

Iframe = <iframe src="" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe><a href="" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px; text-decoration:underline;">Watch live video from disruptY2K38 on</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:

Plus this example project:

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.

Something like this implemented in threejs

Is it not possible yet in playcanvas?

I wouldn’t really call that “implemented” in Three.js exactly, this appears to be using the exact techniques that Will was describing a couple years ago here. This should be possible in any of the webGL engines, I believe you just need to convert this tutorial over to PlayCanvas. I’ve only skimmed it, but it seems to just use CSS transformations as discussed before with some messing with the Z buffer as well. Someone else also posted a similar project in PlayCanvas here a couple weeks ago, so both of these things together make me believe that this is already possible in PlayCanvas.

I’m currently busy with a gamejam project I started that’s going to go for another week, but I think this is pretty cool and I’d love to give it an attempt myself. If you haven’t figured it out by next week, I’ll probably throw my own hat into the ring.

That being said, I don’t claim to know everything about the subject. Good luck to you!

1 Like