https://github.com/jure/aframe-blink-controls
A teleport (blink with rotation) component for A-Frame
https://github.com/jure/aframe-blink-controls
aframe rotation teleport webxr
Last synced: 4 months ago
JSON representation
A teleport (blink with rotation) component for A-Frame
- Host: GitHub
- URL: https://github.com/jure/aframe-blink-controls
- Owner: jure
- License: mit
- Created: 2020-12-14T17:10:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-29T10:16:38.000Z (over 1 year ago)
- Last Synced: 2025-01-30T22:17:17.279Z (4 months ago)
- Topics: aframe, rotation, teleport, webxr
- Language: JavaScript
- Homepage: https://jure.github.io/aframe-blink-controls
- Size: 64.7 MB
- Stars: 50
- Watchers: 7
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aframe-blink-controls
## [Live examples](https://jure.github.io/aframe-blink-controls)
## [Video demo](https://twitter.com/JureTriglav/status/1346502092282847234?s=20)
This component adds teleport with rotation to A-Frame applications! It's a modified version of the [`aframe-teleport-controls`](https://github.com/fernandojsg/aframe-teleport-controls) component by @fernandojsg, and the main changes are:
* added support for rotation,
* removed line teleport option,
* added support for thumbsticks,
* added snap turn support,
* calculation of parabolic roots for accurate longer teleport rays.
This is a work in progress to support an experimental project and currently only tested on: Oculus Quest, Oculus Quest 2.
Support for HTC Vive/Valve Index/HP Reverb G2 etc. controllers is only theoretical/untested, as I don't have a way of testing on these devices yet. PRs welcome!
## Properties
| 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 cameraRig) | |
| collisionEntities | Selector of the meshes used to check the collisions. If no value provided a plane y = 0 is used | |
| startEvents | Alternative to `button`, list of events to start teleporting.| [] |
| endEvents | Paired with `startEvents`, list of events to end teleporting.| [] |
| cancelEvents | Events to cancel teleporting. | [] |
| button | Button used to launch the teleport: trackpad, trigger, grip, menu, thumbstick | |
| 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 | #4d93fd |
| 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 | #4d93fd |
| curveMissColor | Color used for the curve when it doesn't hit anything | #ff0000 |
| curveNumberPoints | Number of points used in the curve | 50 |
| curveLineWidth | Line width of the curve | 0.025 |
| curveShootingSpeed | Curve shooting speed, as bigger value, farther distance. | 8 |
| interval | Number of milliseconds to wait in between each intersection test. Lower number is better for faster updates. Higher number is better for performance. | 0 |
| defaultPlaneSize | Default plane size | 100 |
| 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 too steep to jump to it. | 45 |
| drawIncrementally | If the ray should be drawn as an animation | true |
| incrementalDrawMs | How long the ray animation should be | 500 |
| snapTurn | If left/right thumbstick axis performs a 45 deg rotation | true |
| rotateOnTeleport | Will rotate player on teleport, facing the direction where the arrow is pointing | true |
### Usage
#### Directly in the browser
Use the script files directly, for example:
```html
My A-Frame Scene
```
By default, this uses the **forward thumbstick axis to activate** the teleport, as that seems to be a familiar way across different applications and platforms, in addition to being pratical (as it does not require pressing buttons while also e.g. moving axes). When the teleport is active, you can also choose the direction you want to be facing (rotation) after teleporting, by using the thumbstick.
You can also use e.g. the trigger button instead of the thumbstick by adding `button: trigger` (or `trackpad`, `trigger`, `grip`, `menu`, `thumbstick`). Or specify `startEvents` and `endEvents` for specific use cases, though give the default bindings a try first!
For `collisionEntities`, you specify a selector for the objects that you want to calculate collisions with. By default this is a 100x100 plane at y = 0.
#### Installing via npm
Install via npm:
```bash
npm install aframe-blink-controls
```
Then require it: this will register the component globally.
```js
require('aframe-blink-controls');
```
### Development
Use `npm run dev` to run a development build with a number of provided examples on https://localhost:8080 (or alternatively your computer's IP on your network, e.g. for testing on standalone devices).
### Events
| Event | Properties of `event.detail` | Description |
|------------|------------------------------------------|----------------------------------|
| `teleported` | `oldPosition`, `newPosition`, `hitPoint`, `rotationQuaternion` | Fires when teleportation begins. |