aframe-web-portals

An aframe component for adding portals to other websites.

Usage no npm install needed!

<script type="module">
  import aframeWebPortals from 'https://cdn.skypack.dev/aframe-web-portals';
</script>

README

aframe-web-portals

Latest NPM release Minzipped size License

An aframe component for creating portals to other websites.

Check out the live example.

Example gif

Usage

To create a portal, add the web-portal component.

<a-entity web-portal="url:https://example.com; text:Example"></a-entity>

Properties

Property Description Default
url the url of the target web page "https://aframe.io"
text text to display above the portal ""
width width of the portal 1.5
height height of the portal 2.4
frameWidth width of the portal frame 0.15
enableFrame enables a visual frame around the portal true
enableWebsurface enables a websurface display of the target site true
enableReturnButton enables a button overlay upon portal entry for leaving the site true

Additional Info

The component currently uses AABB collision detection. While web-portals still work when rotated at non axis aligned angles (ie. rotation="0 30 0"), the best results will be seen when the portals are aligned with a cardinal world direction (ie. rotation="0 90 0)