Teleport component
| Property | Description | Default Value |
|---|---|---|
| cameraRig | Selector of the camera Rig to teleport | |
| 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 |
| 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 |
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:
<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 id="cameraRig">
<!-- camera -->
<a-entity camera wasd-controls look-controls></a-entity>
<!-- hand controls -->
<a-entity id="left-hand" teleport-controls="cameraRig: #cameraRig"></a-entity>
<a-entity id="right-hand" teleport-controls="cameraRig: #cameraRig"></a-entity>
</a-entity>
</a-scene>
</body>Install via NPM:
npm install aframe-teleport-controlsThen register and use.
require('aframe-teleport-controls');