Is rendering objects in front of iframes possible?

🌵 Needle Engine
1

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

2

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

3

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)

4

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

by user 216692838757433347

5

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

6

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

7

The “mixed” case requires the mentioned occluder

8

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

9

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

10

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

11

I see, so after some research I understand that div.style.zIndex 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>`; div.style.zIndex = "10000"; div.style.position = "absolute"; div.style.pointerEvents = "initial";

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

by user 216692838757433347

12

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