aframe-gaze-component

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #machine-learning #deep-learning #linux #nodejs #macos #cli #kubernetes #awesome-list #vue #open-source

aframe-gaze-component

(★ 10)

A-Frame gaze tracker control.

aframe-gaze-component 최신버젼 다운로드

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## aframe-gaze-control-component

[![Version](http://img.shields.io/npm/v/aframe-gaze-control-component.svg?style=flat-square)](https://npmjs.org/package/aframe-gaze-control-component)
[![License](http://img.shields.io/npm/l/aframe-gaze-control-component.svg?style=flat-square)](https://npmjs.org/package/aframe-gaze-control-component)

Look control that interprets gaze data as input then rotates the camera.

### Usage

Usage requires Node.JS as well as Firefox.

* clone the repository: `git clone https://github.com/jsimonson2013/aframe-gaze-component.git`
* navigate to the root: `cd aframe-gaze-component`
* install packages: `npm install`
* run the application: `npm run start`

For [A-Frame](https://aframe.io).

### API

Create an event
```
var event = new CustomEvent('gazemove', {
  detail: {
    'x': gaze_x,
    'y': gaze_y,
  },
  bubbles: true,
  cancelable: true
});
event.initEvent('gazemove', true, true);
```

Then dispatch to `sceneEl.canvas` every time the gaze moves
```
if(data != null){
  event.detail.x = data.x;
  event.detail.y = data.y;
  canvasEl.dispatchEvent(event);
}
```

And add as active camera to scene
```
<a-scene>
  <a-sky src="image.jpg"></a-sky>
  <a-entity camera="userHeight: 1.6" gaze-control=""></a-entity>
</a-scene>
```

### Installation

#### Browser

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

```html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-gaze-control-component/dist/aframe-gaze-control-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity gaze-control=""></a-entity>
  </a-scene>
</body>
```

<!--
Or with [angle](https://npmjs.com/package/angle/), you can install the proper
version of the component straight into your HTML file, respective to your
version of A-Frame:

```sh
angle install aframe-gaze-control-component
```
-->
#### npm

Install via npm:

```bash
npm install aframe-gaze-control-component
```

Then require and use.

```js
require('aframe');
require('aframe-gaze-control-component');
```

### Example

A live example can be found [here](http://jacobsimonson.me:7000).

### License

My code is under an [MIT License](https://github.com/jsimonson2013/aframe-gaze-component/blob/master/LICENSE). WebGazer.JS, which is heavily utilized in my example, is under a [GPLv3 License](https://github.com/brownhci/WebGazer/blob/master/gplv3.md).

aframe-gaze-component

aframe-gaze-component 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

aframe-gaze-component

aframe-gaze-component 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README