aframe-teleport-controls
Advanced tools
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. | [] |
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.7.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 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>
</a-entity>
</a-scene>
</body>
To use this component with Gear VR, you need to add gearvr-controls:
<a-scene>
<a-entity id="cameraRig">
<a-camera />
<a-entity
teleport-controls="cameraRig: #cameraRig"
gearvr-controls
/>
</a-entity>
</a-scene>
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.
Install via NPM:
npm install aframe-teleport-controls
Then register and use.
require('aframe-teleport-controls');
FAQs
A-Frame teleport controls component
The npm package aframe-teleport-controls receives a total of 146 weekly downloads. As such, aframe-teleport-controls popularity was classified as not popular.
We found that aframe-teleport-controls demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.