{"id":13491390,"url":"https://github.com/dmarcos/aframe-motion-capture-components","last_synced_at":"2025-04-09T08:08:52.877Z","repository":{"id":52620545,"uuid":"77254696","full_name":"dmarcos/aframe-motion-capture-components","owner":"dmarcos","description":"Capture entity motions and replay them on other entities","archived":false,"fork":false,"pushed_at":"2024-03-07T17:09:55.000Z","size":2499,"stargazers_count":131,"open_issues_count":20,"forks_count":31,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-21T01:58:14.166Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://swimminglessonsformodernlife.com/aframe-motion-capture-components/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmarcos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-23T22:53:49.000Z","updated_at":"2024-06-19T01:30:29.777Z","dependencies_parsed_at":"2024-06-19T01:30:27.938Z","dependency_job_id":"bbb2fc70-82e5-4d48-ad53-49984c736a40","html_url":"https://github.com/dmarcos/aframe-motion-capture-components","commit_stats":{"total_commits":67,"total_committers":3,"mean_commits":"22.333333333333332","dds":0.4626865671641791,"last_synced_commit":"3a3cbd73ffc751285be95e9729a09121ff03c440"},"previous_names":["dmarcos/aframe-motion-capture"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmarcos%2Faframe-motion-capture-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmarcos%2Faframe-motion-capture-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmarcos%2Faframe-motion-capture-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmarcos%2Faframe-motion-capture-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmarcos","download_url":"https://codeload.github.com/dmarcos/aframe-motion-capture-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999860,"owners_count":21031046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:00:56.565Z","updated_at":"2025-04-09T08:08:52.856Z","avatar_url":"https://github.com/dmarcos.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","\u003ca id=\"58b6684347a223e01d4d76d9ca185a88\"\u003e\u003c/a\u003eReplay\u0026\u0026重播","JavaScript"],"sub_categories":["Uncategorized"],"readme":"## aframe-motion-capture-components\n\n[A-Frame](https://aframe.io) motion capture components record pose and events\nfrom entities (e.g., camera and tracked controllers) that can be stored in JSON\nor localStorage and then later replayed.\n\nThe motion capture components allow us to emulate the presence of a VR headset\nand controllers. We can build test automation tools for VR experiences. We can\nreplay the recorded user behavior and assert the state of the entities at the\nend. This can happen with no user intervention at all.\n\nWe can also record user interactions and develop on the go where there's no VR\nhardware available. We can iterate over the visual aspect or behavior of the\nexperience using the recorded user input. [Read more about the motion capture\ncomponents](https://blog.mozvr.com/a-saturday-night/) and [its use cases as\ndevelopment tools](https://aframe.io/blog/motion-capture/).\n\nThe A-Frame Inspector uses these components to power the Motion Capture\nDevelopment Tools UI.\n\n[TRY THE DEMOS](http://swimminglessonsformodernlife.com/aframe-motion-capture-components/)\n\n![](https://cloud.githubusercontent.com/assets/674727/24481580/0ac87ace-14a0-11e7-8281-c032c90f0529.gif)\n\n## Usage\n\nThe motion capture components is most easily used by opening the A-Frame\nInspector (`\u003cctrl\u003e + \u003calt\u003e + i`), and hitting `m` to open the Motion Capture\nDevelopment Tools UI.\n\n### Avatar Recording\n\nAn avatar is the representation of a user. Use the `avatar-recorder` to record\nheadset and tracked controller poses as well as controller events (i.e., button\npresses and touches).\n\n1. Set the `avatar-recorder` component on the `\u003ca-scene\u003e` element.\n2. Make sure your controllers have `id`s.\n3. Hit `\u003cspace\u003e` to start recording.\n4. Record movements and controller events.\n5. Hit `\u003cspace\u003e` again to stop recording.\n6. You'll have an option to save the JSON file or upload it by pressing `u` on the keyboard.\n7. The recording will play from `localStorage`.\n\n```html\n\u003ca-scene avatar-recorder\u003e\n  \u003ca-entity id=\"controller1\" hand-controls\u003e\u003c/a-entity\u003e\n  \u003ca-entity id=\"controller2\" hand-controls\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n\nHit `c` on the keyboard to clear all recordings from `localStorage`.\n\n### Avatar Replaying\n\nThe `avatar-recorder` will automatically set the `avatar-replayer` component.\nThough we can specify the `avatar-replayer` explicitly if we want to configure\nit or if we don't need recording (i.e., production).\n\n`avatar-replayer` can be manually disabled from the URL query parameter\n`avatar-replayer-disabled` (e.g.,\n`http://localhost:8000/?avatar-replayer-disabled`). `spectator-mode` can be\nenabled using the URL query parameter `specatatorMode`.\n\n##### From localStorage\n\nBy default, the `avatar-recorder` will save the recording into `localStorage`\nwhich the `avatar-replayer` will replay from by default. Recordings are stored\nin `localStorage.getItem('avatarRecordings')` and are keyed `recordingName`\n(defaults to `default`).\n\nHit `p` to toggle playback.\n\n##### From File\n\nWe can specify the path to a recording file via the `avatar-recording` **query\nparameter** in the URL:\n\n```html\nhttps://foo.bar?avatar-recording=path/to/recording.json\nhttps://foo.bar?avatar-recording=path/to/anotherRecording.json\n```\n\nOr we can specify the path to a recording file in the HTML via the `src` property:\n\n```html\n\u003ca-scene avatar-replayer=\"src: recording.json\"\u003e\n  \u003ca-entity id=\"controller1\" hand-controls\"\u003e\u003c/a-entity\u003e\n  \u003ca-entity id=\"controller2\" hand-controls\"\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n\n## API\n\n### avatar-recorder\n\n| Property          | Description                                                                | Default Value |\n| ----------------- | -------------------------------------------------------                    | ------------- |\n| autoPlay          | Whether to play recording on page load.                                    | true          |\n| autoRecord        | Whether to start recording on page load.                                   | false         |\n| autoSaveFile      | Whether to prompt to save a JSON of the recording to file system.          | true          |\n| localStorage      | Whether to persist recordings in localStorage keyed as `avatarRecordings`. | false         |\n| loop              | Whether to replay recording in a loop.                                     | false         |\n| recordingName     | Name of recording to store in `localStorage.getItem('avatarRecordings')`.  | default       |\n| spectatorMode     | Whether to replay recording in third person mode.                          | false         |\n| spectatorPosition | Initial position of the spectator camera.                                  | 0 0 0         |\n\n#### Methods\n\n| Method                        | Description                                                                                          |\n| -----------------             | -------------------------------------------------------                                              |\n| saveRecordingFile (recording) | Save recording to file. `recording` can either be raw data or recording name stored in localStorage. |\n| startRecording ()             | Start recording                                                                                      |\n| stopRecording ()              | Stop recording.                                                                                      |\n\n#### Keyboard Shortcuts\n\n| Key     | Description                                      |\n| ------- | ----------------------------------------------   |\n| space   | Toggle recording.                                |\n| q       | Toggle spectator mode camera.                    |\n| c       | Clear recording from localStorage and memory.    |\n| u       | Upload recording to file host and get short URL. |\n\n### avatar-replayer\n\nFor spectator mode, `avatar-replayer` will create a head geometry to make the\ncamera visible, represented as a pink box with eyes. This set as\n`cameraEl.getObject3D('replayerMesh')` but is not visible by default.\n\n| Property          | Description                                       | Default Value |\n| ----------------- | ------------------------------------------        | ------------- |\n| autoPlay          | Whether to play recording on page load.           | true          |\n| loop              | Whether to replay recording in a loop.            | false         |\n| recordingName     | Specify to replay recording from localStorage.    | default       |\n| spectatorMode     | Whether to replay recording in third person mode. | false         |\n| spectatorPosition | Initial position of the spectator camera.         | 0 0 0         |\n| src               | Path or URL to recording data.                    | ''            |\n\n#### Methods\n\n| Method                         | Description                                                                               |\n| -----------------              | -------------------------------------------------------                                   |\n| replayRecordingFromSource ()   | Replay recording from either `recordingName` for localStorage or `src` for external file. |\n| startReplaying (recordingData) | Start replaying given passed recording data (object).                                     |\n| stopReplaying ()               | Stop replaying.                                                                           |\n\n### motion-capture-replayer\n\n| Property   | Description                                          | Default Value |\n| --------   | ---------------------------------------------------- | ------------- |\n| enabled    |                                                      | true          |\n| loop       | The animation replays in a loop.                     | false         |\n| recorderEl | An entity that it's the source of the recording.     | null          |\n| src        | The recording data can be hosted in a URL.           | ''            |\n\n### motion-capture-recorder\n\n| Property          | Description                                           | Default Value |\n| --------          | ----------------------------------------------------- | ------------- |\n| autoRecord       | The component start recording at page load.           | false         |\n| enabled           |                                                       | true          |\n| hand              | The controller that will trigger recording.           | 'right'       |\n| recordingControls | Recording is activated by the controller trigger      | false         |\n| persistStroke     | The recorded stroke is persisted as reference.        | false         |\n| visibleStroke     | The recorded stroke is renderered for visual feedback.| true          |\n\n## Installation\n\n### Browser\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eMotion Capture\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/0.6.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/aframe-motion-capture-components/dist/aframe-motion-capture-components.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ca-scene avatar-recorder avatar-replayer\u003e\n    \u003ca-entity id=\"leftHand\" hand-controls=\"left\"\u003e\u003c/a-entity\u003e\n    \u003ca-entity id=\"rightHand\" hand-controls=\"right\"\u003e\u003c/a-entity\u003e\n  \u003c/a-scene\u003e\n\u003c/body\u003e\n```\n\nOr with [angle](https://npmjs.com/package/angle/), you can install the proper\nversion of the component straight into your HTML file, respective to your\nversion of A-Frame:\n\n```sh\nnpm install -g angle \u0026\u0026 angle install aframe-motion-capture-components\n```\n\n### npm\n\nInstall via npm:\n\n```bash\nnpm install aframe-motion-capture-components\n```\n\nThen require and use.\n\n```js\nrequire('aframe');\nrequire('aframe-motion-capture-components');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmarcos%2Faframe-motion-capture-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmarcos%2Faframe-motion-capture-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmarcos%2Faframe-motion-capture-components/lists"}