Managing css3d iframes while pointerlock (newbie)

i was using these demos to build my current code:

this tutorial:

and a lot of help on discord too.

my problem is that i’m trying to create a website where you walk around (already done along with 3d object) and you can click or walk into houses (not yet done but i think i know how to do) which will fire up 3d iframes floating around where you can click in them with 3d cursor (center place of screen, like in minecraft, here problem).
right now i’m testing that css3d demo i linked but all it shows is normal html elements just 3d positioned and surely not in canvas so it surely won’t follow mouse from existing canvas.
from people heard that to embed it in “real” 3d it need to be a texture and iframe can’t be a texture.
any ideas on how to do it then?

pretty sure you cannot interact with dom when in pointerlock, full stop.

You can only wait for some trigger of some kind, and disable pointerlock.. then they can interact.

It seems counterintuitive, but if you look through the lense of security.. you can understand why:

Web pages/iframes can’t be used as textures.. ( because you could read sensitive data from the users browser page/images )

And you can’t programatically control interaction.. (because your software could hijack interaction and start doing things on a site without users permission.)

i mean - all these iframes are on 1 site, mine, under one host (just a site layout made out of iframe cause how else i could manage a 8-pages-separated in one file on static hosting? yea).
and i don’t want to disconnect pointerlock cause then it’d need interaction to get back to this (and mouse could be visible + view in 3d wouldn’t move in same time)

Doesn’t matter.

Keep in mind.. once you HAVE gotten pointerlock once, you can freely enter/exit it programatically.

But.. in pointerlock.. the cursor isn’t “real”. its virtualized. It loops across the window etc. and when you disengage pointerlock, the cursor will be magically roughly in the middle of the window.

(this behavior frustratingly also changes periodically with different browser releases)

i know that’s a shrodinger-cursor…
the problem is the iframe as i want it focused and to capture mouse events too…

Maybe I’m misunderstanding what you mean. Are you saying your iframes are not interactable at all?

in css3d are but if i made overlay to 3d view it couldn’t be interactable i think…

This:

Is not possible.

Instead you can: click them with a 3d cursor, at which point, pointerlock disengages, the regular page cursor re-appears and you can interact with the iframe. Clicking outside of the iframe then re-engages pointerlock.

But you would have to explicitly write this functionality.

vr-like i mean

vr browsers on the device may behave differently. (but probably not. The controller just becomes the cursor in this case)

i doubt you understand me.
i want an iframe which floats in first plane to user as a rectangle and while in pointerlock with cursor in center to click with this center so environment moves but cursor is still (inverse of regular browser basically)

still sounds impossible to me. :slight_smile: you’re about to learn some stuff!

how i imagine that (made that gif specially for you):
moving_frame

1 Like

I don’t think you can achieve that with pointer lock if that window is an iframe.