Display a web page on the surface of a cube?

Questions
1

I know how to show YouTube iFrame hosted videos in ThreeJS. What I’d like to do now is display a web page on the surface of a cube? Is that possible? If not, is there a way to display snapshot of the web page rendered as an image graphic? If there is a sample that shows this, please drop a link.

I want to have cube in my world that on one side displays a list of appointments, generated by my back-end server. I want to update the cube surface with the latest list of appointments every minute. Is there a reasonable way to do this using a JS interval function?

Also some sample code that shows how to update just one surface of a cube with proper element destruction so as not to incur a memory leak would be really helpful.

2

If the list you are talking about doesn’t need to be interactive, I think you could generate a HTML canvas and then use it as a texture for the cube. I don’t think you even need to manage the texture since you can simply overwrite it at regular intervals and tell your render that the texture needs updates. This is an example that you can copy from (draw in the top right corner and the texture will appear on the cube).

For projecting a video: this is something I found a while back. It doesn’t look like it’s an out-of-the-box solution you can use but it could be a starting point?

1 Like
3

The example with YouTube uses iframes. You can place in that’s iframes any pages you need.

1 Like
4

here are two examples that have html you can interact with projected into the scene:

floating laptop: Mixing HTML and WebGL w/ occlusion - CodeSandbox

handheld mobile: Interactive spline scene + live HTML - CodeSandbox

now in react we have components that make it quite simple, but if you wanted to make this from scratch your first stop is css3drenderer. the problems you will encounter:

  • css3drenderer cannot hide or occlude html behind other geometry, it will always be in front, you need to fork it and implement it yourself using raycasting
  • having scene contents below and above html without occlusion tricks is hard, the only solution i have found are stencil masks (see the 2nd demo)
  • making events work both in html and the canvas is also not trivial, one will always block it for the other, you need a shared parent where both are withing, positioned absolute on top of one another
1 Like