{"id":14981322,"url":"https://github.com/rozek/aframe-hemisphere-controls","last_synced_at":"2026-03-06T21:31:52.171Z","repository":{"id":57750953,"uuid":"526156208","full_name":"rozek/aframe-hemisphere-controls","owner":"rozek","description":"a simple \"orbit-controls\" alternative for A-Frame","archived":false,"fork":false,"pushed_at":"2022-08-23T19:56:25.000Z","size":91,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T23:13:15.342Z","etag":null,"topics":["a-frame","orbit-controls","three-js","threejs"],"latest_commit_sha":null,"homepage":"","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/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-18T10:04:12.000Z","updated_at":"2022-08-24T12:29:29.000Z","dependencies_parsed_at":"2022-08-26T09:30:45.822Z","dependency_job_id":null,"html_url":"https://github.com/rozek/aframe-hemisphere-controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/aframe-hemisphere-controls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Faframe-hemisphere-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Faframe-hemisphere-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Faframe-hemisphere-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Faframe-hemisphere-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/aframe-hemisphere-controls/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Faframe-hemisphere-controls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30198661,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["a-frame","orbit-controls","three-js","threejs"],"created_at":"2024-09-24T14:03:19.465Z","updated_at":"2026-03-06T21:31:52.138Z","avatar_url":"https://github.com/rozek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# aframe-hemisphere-controls #\n\na simple \"orbit-controls\" alternative for A-Frame\n\nFor a simple model viewer based on an [A-Frame](https://github.com/aframevr/aframe/) instance embedded in a web page I needed a  mechanism to rotate the shown model by mouse, finger, arrow and WASD keys. Only model(!) rotation was needed, panning and zooming were unwanted. Additionally, stereoscopic display (aka \"VR mode\") and gyroscopes found in mobile devices had to be disabled.\n\nAnd since the existing [orbit-controls](https://github.com/supermedium/superframe/tree/master/components/orbit-controls/) component did not meet my requirements, I just made my own.\n\n\u003e Note: like many others, `aframe-hemisphere-controls` are based on the Three.js [`OrbitControls`](https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js) found in the Three.js examples folder. However, you do not have to import `OrbitControls` yourself, they come bundled into `aframe-hemisphere-controls`\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/aframe-hemisphere-controls/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this work and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n`aframe-hemisphere-controls` may be used as an ECMAScript module (ESM) or explicitly loaded after the `\u003cscript\u003e` tag for A-Frame itself.\n\nFor the ESM variant, install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install aframe-hemisphere-controls\n```\n\nand `import` it into your code whereever needed\n\n```javascript\nimport \"aframe-hemisphere-controls\"\n```\n\nOtherwise, load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/aframe-hemisphere-controls\"\u003e\u003c/script\u003e\n```\n\n## Properties ##\n\n`aframe-hemisphere-controls` is an A-Frame component with the following properties:\n\n\u003ctable\u003e\n \u003ctbody\u003e\n  \u003ctr\u003e\u003cth\u003eProperties\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003ctbody\u003e\n  \u003ctr\u003e\u003ctd\u003eposition\u003c/td\u003e\u003ctd\u003ea vector with the initial camera position (default: `0 1 4`)\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\u003ctd\u003etarget\u003c/td\u003e\u003ctd\u003ea vector specifying the point the camera looks at and orbits around (default: `0 0 0`)\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Usage ##\n\nOnce loaded or imported, `aframe-hemisphere-controls` may be used as a component of the scene element\n\n```html\n\u003ca-scene hemisphere-controls=\"position:0 1 4; target:0 0 0\"\u003e\n\u003c/a-scene\u003e\n```\n\nBy default, the shown model is assumed to be positioned in the center of the coordinate system with the camera placed one unit above and four units in front - if need be, you may change these settings as required.\n\n`vr-mode-ui` and `look-controls` will automatically be disabled.\n\n## Operation ##\n\nFor the operation, imagine your model being placed inside a small \"snow ball\" - by rotating the snow ball the model is rotated as well and can be seen from different angles.\n\nRotation can be achieved by **dragging with mouse or finger** and by using **arrow or \"WASD\" keys**. The **\"Home\" key resets** the scene to the original camera position.\n\n## Example ##\n\nHere is a complete example (albeit without the HTML boilerplate)\n\n```html\n\u003cscript src=\"https://unpkg.com/aframe\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/aframe-hemisphere-controls\"\u003e\u003c/script\u003e\n\n\u003ca-scene embedded\n  hemisphere-controls=\"position:0 0.5 4; target:0 0 0\"\n  style=\"width:600px; height:450px\"\n\u003e\n  \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n\n  \u003ca-plane width=\"4\" height=\"4\" color=\"#7BC8A4\"\n    position=\"0 0 0\" rotation=\"-90 0 0\"\u003e\u003c/a-plane\u003e\n\n  \u003ca-box      color=\"#4CC3D9\" position=\"-1 0.5 1\"  rotation=\"0 45 0\"\u003e\u003c/a-box\u003e\n  \u003ca-sphere   color=\"#EF2D5E\" position=\"0 1.25 -1\" radius=\"1.25\"\u003e\u003c/a-sphere\u003e\n  \u003ca-cylinder color=\"#FFC65D\" position=\"1 0.75 1\"  radius=\"0.5\" height=\"1.5\"\u003e\u003c/a-cylinder\u003e\n\u003c/a-scene\u003e\n```\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/aframe-hemisphere-controls/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Faframe-hemisphere-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Faframe-hemisphere-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Faframe-hemisphere-controls/lists"}