How to set up an iframe inside three.js canvas?
That does not work. You can’t nest HTML elements inside a canvas element.
Why?? We must solve this.
quick update on this issue @Mugen87 
I see youtube exemple in library with CSS3D -
It seems it does use an iframe (three.js/css3d_youtube.html at 79edf22a345079dc6cf5d8c6ad38ee22e9edab3c · mrdoob/three.js · GitHub )
wondering if this “css3D” is incompatible with other three.js stuff (loaders, gltf etc…) or maybe it’s something new.
which begs the question: can we embedd any other webpage with full browsing control inside three.js environment? trying to bring web page stuff into the environment (youtube videos, but also normal web pages)
- bonus question
any tips on efficiently bringing PDF as textures at runtime? also how to handle multiple page docs?
thanks guys… @donmccurdy @mrdoob 
J.
1 Like
The idea of the CSS renderers is to manage HTML elements as an overlay on top of your renderer’s canvas. It’s then possible to apply 2D/3D transformation to these elements in order to keep them in sync with real 3D objects in your WebGL scene. A simple example for this approach is:
https://threejs.org/examples/css2d_label
It’s of course also possible to use just CSS3DRenderer as a standalone renderer like demonstrated by the mentioned youtube example.
@Jay_E I’m not sure why you have posted in this topic since your post is more or less unrelated to the OP’s original question. Of course you can use iFrames in HTML sites. That is what the Youtube demo does. The OP wanted to embed an iFrame into a canvas element which does not work.
1 Like
Finally! Been trying to add an iframe for a couple hours now and this solution works, alhamdulilah
1 Like