nuǝɯ pǝɥsᴉꞁod mǝu
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    Teleport component



    Property Description Default Value
    cameraRig Selector of the camera Rig to teleport
    teleportOrigin Selector of the child of cameraRig to use as the center point for teleporting, typically the camera. If set teleporting will position the cameraRig such that this element ends up above the teleport location (rather than the center of the camreaRig)
    type Type of teleport: line or parabolic parabolic
    button Button used to launch the teleport: trackpad, trigger, grip, menu trackpad
    collisionEntities Selector of the meshes used to check the collisions. If no value provided a plane Y=0 is used
    endEvents Paired with startEvents, list of events to listen for to finish teleporting. []
    hitEntity Entity used to show at the hitting position. If no value provided a cylinder will be used as default.
    hitCylinderColor Color used for the default hitEntity primitives #99ff99
    hitCylinderRadius Radius used for the default hitEntity primitives 0.25
    hitCylinderHeight Height used for the default hitEntity primitives 0.3
    curveHitColor Color used for the curve when hit the mesh #99ff99
    curveMissColor Color used for the curve when it doesn't hit anything #ff0000
    curveNumberPoints Number of points used in the curve 30
    curveLineWidth Line width of the curve 0.025
    curveShootingSpeed Curve shooting speed, as bigger value, farther distance. 5
    defaultPlaneSize Default plane size 100
    maxLength Max length of the ray when using type=line teleport 10
    landingNormal Normal vector to detect collisions with the collisionEntity (0, 1, 0)
    landingMaxAngle Angle threshold (in degrees) used together with landingNormal to detect if the mesh is so steep to jump to it. 45
    startEvents Alternative to button, list of events to listen to start teleporting. []


    Browser Installation

    Install and use by directly including the browser files:

    There are two ways to use it: using a camera rig or not. I strongly recommend using a camera rig as the following example:

      <title>My A-Frame Scene</title>
      <script src=""></script> 
      <script src=""></script> 
        <a-entity id="cameraRig">
          <!-- camera -->
          <a-entity id="head" camera wasd-controls look-controls></a-entity>
          <!-- hand controls -->
          <a-entity id="left-hand" teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head;"></a-entity>
          <a-entity id="right-hand" teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head;"></a-entity>

    To use this component with Gear VR, you need to add gearvr-controls:

        <a-entity id="cameraRig">
          <a-camera />
            teleport-controls="cameraRig: #cameraRig"

    You can also use the trigger button instead of trackpad button by adding button: trigger.

    For Daydream, replace gearvr-controls by daydream-controls.

    If you use aframe-environment-component > 1.0.0 and want to teleport on the generated ground, on the hills, you can specify collisionEntities: .environmentGround. You can also add .environmentDressing if you want to teleport on the dressing like the mushrooms. On Gear VR, it can be very slow with the curved line. Use maxLength: 200; type: line; in this case.

    NPM Installation

    Install via NPM:

    npm install aframe-teleport-controls

    Then register and use.



    npm i aframe-teleport-controls

    Downloadslast 7 days







    last publish


    • avatar