aframe-portals

An aframe component for creating portals.

Usage no npm install needed!

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

README

aframe-portals

Latest NPM release Minzipped size License

An aframe component for creating portals.

Example gif

Usage

To create a portal, add the portal component.

Link portals by setting the destination property.

Set the recursion level by setting the maxRecursion property on one of the portals.

<a-entity id="portal1" portal="destination: #portal2; maxRecursion: 1" position="-3 1.5 -3"></a-entity>
<a-entity id="portal2" portal="destination: #portal1" position="3 1.5 3"></a-entity>

Properties

Property Description Default
destination a CSS selector of the destination portal ""
width width of the portal 2
height height of the portal 3
maxRecursion how many recursion levels to render - only the highest value in the scene is used 0
teleportCooldown cooldown in ms after a teleportation, where the user cannot be teleported 100
enableTeleport enables teleportation when the camera collides with the portal true

Additional Info

Portals have a front and a back. The back is visually broken and should not be exposed to the user.

Increasing maxRecursion takes a huge performance cost. Keep it as low as possible.

Portal teleportation currently doesn't work well if the portals are not aligned with one of the cardinal directions. I will try to fix this in the future, but for the best results, keep portals aligned to 90 degree angles.