{"id":21161414,"url":"https://github.com/justinfrost47/aframe-virtual-joystick","last_synced_at":"2026-01-25T13:01:09.231Z","repository":{"id":259944940,"uuid":"879883932","full_name":"JustinFrost47/aframe-virtual-joystick","owner":"JustinFrost47","description":"aframe-virtual-joystick is a simple aframe component that integrates virtual joystick to touch enabled devices for A-frame ","archived":false,"fork":false,"pushed_at":"2025-11-13T13:07:08.000Z","size":201,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-13T15:11:18.241Z","etag":null,"topics":["3d","aframe","aframe-component","joystick","touch","vr"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JustinFrost47.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-28T18:03:10.000Z","updated_at":"2025-11-13T13:07:12.000Z","dependencies_parsed_at":"2024-10-28T19:36:24.075Z","dependency_job_id":null,"html_url":"https://github.com/JustinFrost47/aframe-virtual-joystick","commit_stats":null,"previous_names":["justinfrost47/aframe-virtual-joystick"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JustinFrost47/aframe-virtual-joystick","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustinFrost47%2Faframe-virtual-joystick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustinFrost47%2Faframe-virtual-joystick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustinFrost47%2Faframe-virtual-joystick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustinFrost47%2Faframe-virtual-joystick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JustinFrost47","download_url":"https://codeload.github.com/JustinFrost47/aframe-virtual-joystick/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustinFrost47%2Faframe-virtual-joystick/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28753411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["3d","aframe","aframe-component","joystick","touch","vr"],"created_at":"2024-11-20T13:13:30.563Z","updated_at":"2026-01-25T13:01:09.214Z","avatar_url":"https://github.com/JustinFrost47.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# aframe-virtual-joystick\n\n`aframe-virtual-joystick` is an A-Frame component that integrates a virtual joystick into your VR scene. This joystick enables easy navigation in VR environments, especially for mobile and touch-based devices. The joystick can be customized to fit the look and feel of your application.\n\n## Installation\n\nYou can install the package via npm:\n\n```bash\nnpm install aframe-virtual-joystick\n```\n\nAlternatively, you can include the script tag in your HTML file:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/aframe-virtual-joystick/dist/aframe-virtual-joystick.js\"\u003e\u003c/script\u003e\n```\n\nThen, import the package into your A-Frame project:\n\n```javascript\nimport 'aframe-virtual-joystick';\n```\n\n## Usage\n\nTo use the `joystick` component in your A-Frame scene, ensure to add `id=\"camera\"` to your camera element, or create a new camera entity with `id=\"camera\"`:\n\n```html\n\u003ca-entity camera id=\"camera\" position=\"0 1.6 0\" look-controls wasd-controls\u003e\u003c/a-entity\u003e\n```\n\n\n### Example 1 (Default):\n\n```html\n\u003ca-scene\u003e\n  \u003c!-- Camera for navigating with the joystick --\u003e\n  \u003ca-entity id=\"camera\" camera look-controls wasd-controls\u003e\u003c/a-entity\u003e\n\n  \u003c!-- Joystick component setup --\u003e\n  \u003ca-entity joystick\u003e\u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n\nThis setup makes the virtual joystick follow the default behavior. The left half of the touch screen will be reserved for movement, similar to most modern games.\n\n### Example 2 (Custom Parameters):\n\n```html\n\u003ca-scene\u003e\n  \u003c!-- Camera for navigating with the joystick --\u003e\n  \u003ca-entity id=\"camera\" camera wasd-controls\u003e\u003c/a-entity\u003e\n\n  \u003c!-- Joystick component setup --\u003e\n  \u003ca-entity \n    joystick=\"joystickAreaStyle: position:fixed; display:block; width:40%; height:100%; left:0px; bottom:0px; background-color:rgba(0,0,0,0.1); z-index:20;\n              textOverlayStyle: position:fixed; bottom:0px; left:10px; font-size:14px Arial; opacity:0.3;\n              textContent: Use joystick to move;\n              speedReductionFactor: 50;\"\u003e\n  \u003c/a-entity\u003e\n\u003c/a-scene\u003e\n```\n\nThis example demonstrates how to customize the joystick's appearance and behavior.\n\n## Component Parameters\n\nThe `joystick` component supports various parameters for customization. You can either pass these parameters directly in the HTML or use the default settings.\n\n### Available Parameters\n\n- **`joystickAreaStyle`**: Customize the joystick area with CSS. Control the dimensions, position, background, and appearance of the joystick. Dragging on this area will trigger the movement joystick For example: \n  ```\n  \"position:fixed; display:block; width:40%; height:100%; left:10px; bottom:10px; background-color:rgba(255,255,255,0.1); z-index:20;\"\n  ```\n\n- **`textOverlayStyle`**: Customize the text overlay appearance with CSS, controlling the font, position, size, and opacity. Example: \n  ```\n  \"position:fixed; bottom:10px; left:10px; font-size:14px Arial; opacity:0.5;\"\n  ```\n\n- **`textContent`**: Set the text displayed on the joystick overlay (useful for instructions). For example: \n  ```\n  \"Use joystick to navigate\"\n  ```\n\n- **`speedReductionFactor`**: Controls the movement speed relative to the joystick force. Higher values reduce speed, while lower values increase speed. Default is `50`.\n\n### Default Parameters\n\n- **`joystickAreaStyle`** (string): \n  ```\n  \"position:fixed; display:block; width:50%; height:100%; left:0px; bottom:0px; background-color:rgba(0,0,0,0); z-index:20;\"\n  ```\n\n  by default the left half of the screen is reserved as joystickArea\n  \n- **`textOverlayStyle`** (string): \n  ```\n  \"position:fixed; bottom:0px; left:0px; margin-top:99%; font-size:12px Roboto; opacity:.3;\"\n  ```\n\n  it is supposed to be shown on the bottom region\n  \n- **`textContent`** (string): `\"\"` (no text by default)\n  \n- **`speedReductionFactor`** (number): `50` (lower values increase speed)\n\n## Event Binding\n\nThe joystick component uses **NippleJS** for event handling. Events such as `move` and `end` are bound to provide a responsive and interactive experience. `moveData` is updated with the joystick’s `force` and `angle`, which are then used to adjust the camera's position.\n\n## Example Configuration\n\nHere’s an example that demonstrates all parameters with custom values:\n\n```html\n\u003ca-entity \n  joystick=\"joystickAreaStyle: position:fixed; display:block; width:40%; height:100%; left:0px; bottom:0px; background-color:rgba(0,0,0,0.1); z-index:20;\n            textOverlayStyle: position:fixed; bottom:0px; left:10px; font-size:14px Arial; opacity:0.3;\n            textContent: Use joystick to move;\n            speedReductionFactor: 30;\"\u003e\n\u003c/a-entity\u003e\n```\n\n## Notes\n\n- The `joystick` component checks for touch capability. It only initializes if the device supports touch events.\n- The joystick component assumes that there’s an element with the `camera` ID in the scene.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinfrost47%2Faframe-virtual-joystick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinfrost47%2Faframe-virtual-joystick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinfrost47%2Faframe-virtual-joystick/lists"}