aframe-motion-capture v0.1.0
aframe-motion-capture
A-Frame motion capture components record pose and events from entities (i.e., camera and tracked controllers) and be replayed or persisted to JSON. The motion capture components allow to emulate the presence of a VR headset and controllers. We can build test automation for VR experiences. One can replay the recorded user behavior and assert the state of the entities at the end. This can happen with no user intervention at all. We can also record user interactions and develop on the go where there's no VR hardware available. One can iterate over the visual aspect or behavior of the experience using the recorded user input
Usage
WebVR Recording
Set the avatar-recorder on the scene. Make sure your controllers have ids.
Then hit <space> to toggle recording. A JSON will automatically be downloaded
once the recording finishes.
<a-scene avatar-recorder>
<a-entity id="controller1" hand-controls"></a-entity>
<a-entity id="controller2" hand-controls"></a-entity>
</a-scene>WebVR Replaying
Specify the path to a captured WebVR recording JSON file. Hit p to toggle
playback.
<a-scene avatar-replayer="src: recording.json">
<a-entity id="controller1" hand-controls"></a-entity>
<a-entity id="controller2" hand-controls"></a-entity>
</a-scene>API
Keyboard Shortcuts
| Key | Description |
|---|---|
| space | Toggle recording. |
| c | Clear recording from localStorage and memory. |
| p | Toggle replaying. |
avatar-recorder
| Property | Description | Default Value |
|---|---|---|
| autoPlay | true | |
| autoRecord | false | |
| binaryFormat | false | |
| localStorage | false |
avatar-replayer
| Property | Description | Default Value |
|---|---|---|
| loop | false | |
| src | '' | |
| spectatorMode | false |
motion-capture-replayer
| Property | Description | Default Value |
|---|---|---|
| enabled | true | |
| loop | true | |
| recorderEl | Selector. | null |
| src | '' |
motion-capture-recorder
| Property | Description | Default Value |
|---|---|---|
| autoStart | false | |
| enabled | true | |
| hand | 'right' | |
| persistStroke | false | |
| visibleStroke | true |
stroke
Trace of the path of an entity.
| Property | Description | Default Value |
|---|---|---|
| color | #EF2D5E | |
| enabled | true |
Installation
Browser
Install and use by directly including the browser files:
<head>
<title>Motion Capture</title>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-motion-capture/dist/aframe-motion-capture.min.js"></script>
</head>
<body>
<a-scene avatar-recorder avatar-replayer></a-scene>
</body>npm
Install via npm:
npm install aframe-motion-captureThen require and use.
require('aframe');
require('aframe-motion-capture');7 years ago