Transparent embedded website

This topic has 4 replies, 3 voices, and was last updated 3 months, 3 weeks ago by Alexander Kovelenov.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
2025-07-30 at 9:20 am #83407

vklein
Customer

The create plane with html is cool but it would be even cooler if the “texture” of the website would be transparent where the html site is transparent, showing the 3d scene behind the html-plane.
Just trying to create a sort of gallery with semi transparent html websites as pictures on the walls. They will be a quiz game and some sort of animated history timeline with free standing texts and images scrolling by. Need it as html for configurable, sharp texts (the CM system of my customer’s e-learning system will set them). Sadly 2D html canvas elements won’t cut it in the walkable 3D world.

2025-07-30 at 9:53 am #83408

Mikhail Luzyanin
Staff

Watch this tutorial it may help.

Co-founder and lead graphics specialist at Soft8Soft.

2025-07-30 at 12:55 pm #83410

vklein
Customer

Please guys, my problem isn’t the scrolling nor do I need a superimposed 2D html text over the canvas. I need html as texture on 3d objects with opacity. Because we want to have existing websites (with transparent background) visible on walls and other 3d objects as we animate the camera through the scene.
I also have a strange problem where the website sometimes don’t want to catch the mouse. Seams to be a problem if the camera is closing in, might be a raycast collision with something in my scene before it reach the html canvas or whatever you are using to decide if the mouse position links to the 3d scene or the html canvas.

Inside the html site, there will be scrolling, but this I’ve solved so far by using window.scrollTo(x, y);

2025-07-31 at 12:18 pm #83427

Alexander Kovelenov
Staff

Hi,
If I understand you correctly, the goal is to make transparent web page assigned as semi-transparent “texture” on your 3D model? Unfortunately, this is not possible since the actual method of operating this puzzle is making cutouts in 3D scene in places where the website “texture” is applied. So this is not a texture per se but rather a fake effect.

Soft8Soft Tech Chief
X | FB | LinkedIn

2025-07-31 at 12:30 pm #83428

Alexander Kovelenov
Staff

However maybe it’s not so necessary to have transparent HTML pages? You can simulate transparency by using the same background color as the underlying 3D surface. Also, you can use any 3D geometry you want above the page to hide elements you don’t want your users to see.

Soft8Soft Tech Chief
X | FB | LinkedIn
Author

Posts