Embedding webpages in a 3D Three.js scene

By Philippe Leefsma

Today sample is inspired by the following article which exposes how to mix a 2d webpage into a 3d WebGL scene. The approach enables some interesting perspectives concerning what we can achieve with WebGL today: for example think about embedding videos or website to a TV screen inside your 3d scene or take advantage of some cool CSS effects and feature mapped onto a 3d surface...

In order to achieve proper blending of 3d meshes and 2d pages in my sample, I had to rely on the approach exposed by this solution. The author suggest adding the WebGL renderer as a child of the CSS3D renderer element, which works but disable the possibility for the user to interact with the page... When adding both renderers directly to the document, interaction with the page is possible, however the meshes do not get render properly in front of the css elements. So far I haven't found a way to combine both results with a single approach.

Here is my current code and a picture of the result: 3 webpages inserted in a Three.js scene. One amazing thing is the possibility to render a WebGL page inside WebGL, hence creating WebGL recursion! I don't know however how resource hungry this might be :)

 

Comments

[Péter Varga]

Dear Philippe,

You saved me a lot of time with this article. It's a little bit old, but still useful. I've search the internet for very long hours and I haven't find a better guide to this topic.

You say: "...which works but disable the possibility for the user to interact with the page... When adding both renderers directly to the document, interaction with the page is possible, however the meshes do not get render properly in front of the css elements. So far I haven't found a way to combine both results with a single approach."

For this part, I found a solution (based on this project: https://github.com/jeromeetienne/threex.htmlmixer ). I carefully went through on his code and compared it to yours. The only main difference I found is that he has "pointer-events: none" on the canvas. I tried it on yours, and it seems to solve the interaction problem.
I hope I could help, since you helped me a lot.

Regards,
Peter

[Harunalikadic]

Hi Peter,

can you point out at which element in Philippe's code did you apply pointer-events:none; and had it work for you?
I have tried to include this in the head css but it doesn't seem to work:
canvas {
pointer-events: none;
}

Thank you, Harun.

[Joachim Wegener]

Dear Philippe,
Actually (january 2020) this script does not allow anymore to embed websites (CORS issue). It seems to be a common problem on all browsers.

Please update your script

Thank you

with best regards,
Joachim