aframe-teleport-controls - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #go #golang #deep-learning #macos #windows #kubernetes #pytorch #mcp #open-source

aframe-teleport-controls

(★ 182)

A-Frame teleport controls component

파일 탐색기

최종 버전 다운로드 (.zip)

- aframe-teleport-controls.js
- aframe-teleport-controls.min.js
- - floor.jpg
  - index.html
- - mappings.js
  - pavement.jpg
- - index.html
- - floor.jpg
  - index.html
  - recording.json
- - asphalt.jpg
  - floor.obj
  - index.html
- - floor.jpg
  - index.html
  - recording.json
- - basic.png
  - custom.png
  - mesh.png
  - multiple.png
- cylinderTexture.js
- ParabolicCurve.js
- RayCurve.js
- __init.test.js
- helpers.js
- index.test.js
- karma.conf.js
.gitignore
.npmignore
.travis.yml
index.html
index.js
LICENSE
package-lock.json
package.json
README.md
teleport.png

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/fernandojsg/aframe-teleport-controls

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd aframe-teleport-controls

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install aframe-teleport-controls

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# aframe-teleport-controls

Teleport component

![Screenshot](https://github.com/fernandojsg/aframe-teleport-controls/raw/master/teleport.png)

## 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 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 |
| 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           |
| 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.| [] |

### Usage

#### Browser Installation

Install and use by directly including the [browser files](dist):

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

```html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.7.1/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">
      
      <a-entity id="head" camera wasd-controls look-controls></a-entity>
      
      <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`:

```html
  <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](https://github.com/feiss/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:

```bash
npm install aframe-teleport-controls
```

Then register and use.

```js
require('aframe-teleport-controls');
```

### Events

| Event      | Properties of `event.detail`             | Description                      |
|------------|------------------------------------------|----------------------------------|
| `teleported` | `oldPosition`, `newPosition`, `hitPoint` | Fires when teleportation begins. |