Is rendering objects in front of iframes possible?

In the iframe Content sample project, if you rotate the camera to look below the open laptop the iframe will clip through the bottom. Is it possible to make so the gameobjects obscure the iframe? I want to make an endless runner game in front of an iframe.

Original Post on Discord

by user 216692838757433347

If the iframe is always the last thing in the scene, you can switch the HTML order

If you have objects both in front and behind you need to get a bit more creative, typically that’s done with an occluder in 3D (an object that renders depth but not color)

What do you mean by last thing in the scene? Like order in hierarchy? Layer order?

by user 216692838757433347

I mean: if it’s always behind your 3D content and never in front

right now the scene is set up in a way that it’s always in front and never behind

The “mixed” case requires the mentioned occluder

My apologies, I asked the wrong question in my follow up. I’m ok with the iframe rendering behind all 3D content, but I don’t know how to achieve this effect. What did you mean by switch the HTML order?

by user 216692838757433347

Perhaps you mean render the NeedleEngine component in front of an iframe in my web app instead of using the iframeComponent script from the laptop demo

by user 216692838757433347

What I meant is that you should be able to modify the script from the demo to change the html order there - it’s basically also just inserting the iframe into the DOM + applying some CSS3D

I see, so after some research I understand that defines the HTML order in this case. Here’s a relevant block from IFrameContent: ts const div = document.createElement('div'); div.innerHTML = `<iframe width="1000" height="1000" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking; xr" allowfullscreen></iframe>`; = "10000"; = "absolute"; = "initial";

I changed the zIndex value to -1, but the iframe still renders in front.

by user 216692838757433347

make sure the element you want on top is not static (the default) positioned. It should be either relative, absolute, or fixed

by user 300386587278049291