I’m not used to coming in for help but I’m stuck on something that’s important to me.
I want to display webpages into PlayCanvas, I don’t want an overlay, I want it in 3D so like a texture for a plane/box (but I know it’s not possible). I want display Twitch streaming, etc so I can’t do it with videos, screenshots or anything else, I really need to display Iframe.
I have already done a lot of research but I’m stuck by my lack of competence. Will from PlayCanvas Team explains how to do it :
Sadly rendering DOM (webpage) elements on a 3D plane isn’t supported in Playcanvas and in general in WebGL. You will have to render your webpage or part of your webpage to an image and then create a pc.Texture from that to have it render on a 3D plane. Of course with that option you will lose all interactivity / input events with that webpage. It will just be a static screengrab.
Three.js has a special CSS3D renderer that is able to do that partly, though it’s still not truly 3D. It can’t play well with a WebGL scene of yours. From the tutorial you posted:
Thank you for that answer, unfortunately the technique of displaying images or videos don’t help me, my current problem is “How to display Twitch streams on PlayCanvas” as it’s .m3u8 files and not .mp4 files I don’t see other methods than using a Twitch player into iframe.
But I would like to have the solution of Will to solve my current problem and also be able to display web pages when I need them.
I know have Iframe in WebGL isn’t possible but the hack is possible (create an iframe in DOM and scale it on transparent plane), and this hack interest me but I don’t success to do it.
Agreed an example in Playcanvas for at least faking it would be most welcome by many people. You can also create a feature request for it in the engine repo, it includes a list of engine examples that showcase the engine capabilities.