voxel / voxel-webview

embed webpages in a voxel.js world using CSS 3D (voxel.js plugin)
15 stars 2 forks source link

Mouse interaction with webpage ('enter' and 'exit' page interaction), besides .web command #1

Open deathcap opened 10 years ago

deathcap commented 10 years ago

Currently, the webpage doesn't receive mouse events. You can already interact with the webpage using the keyboard - press Escape to exit pointer lock, then Tab to traverse the links, text fields etc., but mouse events aren't passed. Would be cool if they were, somehow.

(But the WebGL view canvas needs mouse events to acquire pointer lock?)

deathcap commented 10 years ago

If the 3d css div z-index is changed from -1 to 0, then you can interact with the iframe:

screen shot 2014-02-16 at 11 30 02 am

but not the canvas. Maybe a separate mode you can enter and exit for this purpose.

deathcap commented 10 years ago

From the developer console:

document.getElementById('voxel-webview').parentElement.parentElement.style.zIndex=0

You can even load the game into itself:

document.getElementById('voxel-webview').src = 'http://deathcap.github.io/voxpopuli/'

and it runs at full performance:

screen shot 2014-02-17 at 9 30 22 pm

similar to /u/drasdafy suggested (but instead for MC) at https://pay.reddit.com/r/Minecraft/comments/1xzbya/and_this_is_why_i_love_mods/

You know what'd be cool? Playing the browser based version of minecraft, within minecraft. :3

deathcap commented 10 years ago

added .url and .web to https://github.com/deathcap/voxel-commands/commit/60effbb47e1d2d1611c27fa80fb2a03208429207 just for fun.. how far can it go ;)

screen shot 2014-02-17 at 10 09 43 pm screen shot 2014-02-17 at 9 48 58 pm screen shot 2014-02-17 at 9 46 52 pm

deathcap commented 10 years ago

Fixed "Failed to enable plugin" bug in screenshots above with https://github.com/deathcap/voxel-plugins/commit/9cd27dfb8245a10ad9806c645a5dc253719cf585

Added 'click outside of webview to return to game' in https://github.com/deathcap/voxel-webview/commit/7b07305185d30fcbb697205873432e0c5984433a - but 1) if the iframe fills up the whole screen, how can you exit? (well, if voxel-inventory-hotbar is installed you can click it since it covers the iframe), 2) there's still no in-game survival means to 'enter' the webview interaction (temporary: .enable voxel-webview and then .web commands in voxel-commands) - might need a block to allow right-click interaction with voxel-use (ref GH-3)

deathcap commented 9 years ago

If the 3d css div z-index is changed from -1 to 0, then you can interact with the iframe

alternate approach at http://deathcap.github.io/gl-css3d/ - (uses a button to) toggle the pointer-events CSS properties, to switch between game (WebGL) and browser (CSS3D) mouse interaction. On the other hand raising the z-index (which has been working and still works in 0.2. with voxel-webview's built-in .web command) has the advantage that it raises the webpage above the canvas so it isn't necessarily occluded, making for easier interaction.

deathcap commented 9 years ago

screen shot 2015-02-16 at 9 35 33 pm