Issue making iframe inside CSS3DObject fit arbritary plane


I am trying to figure out a way to programmatically fit an iframe inside an arbritary Plane in a Scene.

I want to have a way that given an

  • arbitrary Plane in a Scene.
  • an iframe of a webpage

I would like to render the webpage fiting the whole Plane space.

  • The plane has a transparent material that enables to see the content of the iframe.
  • The cssobject-div is transformed with the help of CSS3DObject and CSS3DRenderer

Suppose I have a Plane placed in the scene, for this example its name is “web_plane”. I would like to programmatically make it render an iframe, for this example the webpage “” . I am struggling to make it fit completely to cover the plane “web_plane”.

To my understanding in order to achieve that I need that the transformed div occupy exactly the place of the plane but I believe it is not the case as it is smaller.

Any help would be appreciated :slight_smile:

This thread should have lots of tips Youtube videos on a mesh (port of CSS3DRenderer.js) and @ozRocker is the king of it !!!

1 Like

Hi @sebavan thanks for your answer. I have been around with the tips, but I am still wondering how I can solve it for this concrete example to stretch the iframe to the whole plane and I don’t know how to do it.

You need to set correct sizes in a few places in the playground:

in the plane size and scaling, then in the youtubeVideoWidth and height as well as the createCSSobject width and height