A-Frame gaze tracker control.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
.gitignore
LICENSE
README.md
_config.yml
index.html
index.js
package.json

README.md

aframe-gaze-control-component

Version License

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

IMAGE ALT TEXT HERE

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.

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:

<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>

npm

Install via npm:

npm install aframe-gaze-control-component

Then require and use.

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

Example

A live example can be found here.

License

My code is under an MIT License. WebGazer.JS, which is heavily utilized in my example, is under a GPLv3 License.