Issue making iframe inside CSS3DObject fit arbritary plane

Questions
1

Hello,

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 “https://www.babylonjs.com” . 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.

image
image1080Ă—554 51.5 KB

Any help would be appreciated :slight_smile:

2

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
3

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.

4

You need to set correct sizes in a few places in the playground: https://playground.babylonjs.com/#PQ0PUD#1

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

2 Likes