mrey3000 / aframe-websurfaces

📦 An aframe component for adding interactable webpages to your scene.

aframe-websurfaces

An aframe component for adding interactable web pages to your scene.

Check out the live example.

Usage

To create a websurface, just add the websurface component. This will create an iframe and project it's contents onto a plane:

<a-entity websurface></a-entity>

Properties

Property	Description	Default
url	the url of the web page	"https://aframe.io"
width	width of the websurface	1
height	height of the websurface	0.75
isInteractable	enables mouse interaction	true
frameSkips	updates render* on every n cycles	1
autoSceneStyling	sets scene.style.position to "absolute"	true

*note - only the shape of the web page in the scene is affected by this, the web page will still play at normal speed

Members

Property	Description
el.websurface_iframe	gives the used iframe
el.css3d_context	gives the DOMContext
el.css3d_context.domElement	gives the div that stores the css3d

Additional Info

The web page is not actually present inside the aframe scene, only an empty plane is. Because of this, the web page is not visible in VR.

Under the hood this uses a modified version of three-dom-elements, massive props there.