Look control that interprets gaze data as input then rotates the camera.
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.
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>
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>Install via npm:
npm install aframe-gaze-control-componentThen require and use.
require('aframe');
require('aframe-gaze-control-component');A live example can be found here.
My code is under an MIT License. WebGazer.JS, which is heavily utilized in my example, is under a GPLv3 License.