node package manager

aframe-teleport-controls

aframe-teleport-controls

Teleport component

Screenshot

Properties

Property Description Default Value
type Type of teleport: line or parabolic parabolic
button Button used to launch the teleport trackpad
collisionEntities Selector of the meshes used to check the collisions. If no value provided a plane Y=0 is used
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
maxLength Max. length for line teleport 10
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
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

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> 
  <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-entity teleport-controls vive-controls="hand: left"></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-teleport-controls

Then register and use.

require('aframe-teleport-controls');