{"id":20955135,"url":"https://github.com/bryik/aframe-layers-component","last_synced_at":"2025-05-14T04:33:02.398Z","repository":{"id":40811576,"uuid":"282338407","full_name":"bryik/aframe-layers-component","owner":"bryik","description":"This is an A-Frame component for controlling the layers of an entity.","archived":false,"fork":false,"pushed_at":"2023-01-07T20:29:17.000Z","size":1978,"stargazers_count":4,"open_issues_count":14,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-13T15:54:09.378Z","etag":null,"topics":["aframe","vr","webvr"],"latest_commit_sha":null,"homepage":"https://bryik.github.io/aframe-layers-component/index.html","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/bryik.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}},"created_at":"2020-07-25T00:05:27.000Z","updated_at":"2025-01-05T06:50:19.000Z","dependencies_parsed_at":"2023-02-08T01:00:59.467Z","dependency_job_id":null,"html_url":"https://github.com/bryik/aframe-layers-component","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryik%2Faframe-layers-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryik%2Faframe-layers-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryik%2Faframe-layers-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryik%2Faframe-layers-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryik","download_url":"https://codeload.github.com/bryik/aframe-layers-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254071359,"owners_count":22009778,"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":["aframe","vr","webvr"],"created_at":"2024-11-19T01:18:11.098Z","updated_at":"2025-05-14T04:33:01.860Z","avatar_url":"https://github.com/bryik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## aframe-layers-component\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"An image split in half. Left side has: a green floor, a blue cube, and a red sphere. Right side has: a green floor, a red sphere, and a yellow cylinder.\" src=\"./in-vr.png\"\u003e\n\u003c/p\u003e\n\nThis is an A-Frame component for controlling the [layers](https://threejs.org/docs/index.html#api/en/core/Layers) of an entity.\n\nWhy is this useful? In VR, sometimes you want to show things to one eye but\nnot the other (stereo panoramas for instance). This can be done by restricting\nan Object3D to either layer 1 [(visible to the left eye) or layer 2 (visible\nto the right eye)](https://github.com/mrdoob/three.js/blob/0950e5b6e8bceb520c154f45b5c240af45f0ed11/src/renderers/webxr/WebXRManager.js#L41).\n\n- [Demo](https://bryik.github.io/aframe-layers-component/index.html)\n\n### properties\n\n| Property |                          Description                          | Default Value |\n| :------: | :-----------------------------------------------------------: | :-----------: |\n|  layers  | An array of layers the entity should have enabled e.g. \"0, 1\" |      \"0\"      |\n\nNote: omitting layer 0 will likely cause your object to disappear (unless you enable additional layers on the camera).\n\n## usage\n\n### browser\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.0.4/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-layers-component@1.0.0/dist/aframe-layers-component.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene renderer=\"antialias: true\"\u003e\n      \u003ca-entity id=\"camera\" camera position=\"0 1.6 0\"\u003e \u003c/a-entity\u003e\n\n      \u003c!-- Restrict the box to layer 1 --\u003e\n      \u003ca-box\n        layers=\"1\"\n        position=\"-1 0.5 -3\"\n        rotation=\"0 45 0\"\n        color=\"#4CC3D9\"\n      \u003e\u003c/a-box\u003e\n      \u003ca-sphere position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n      \u003c!-- Restrict the cylinder to layer 2 --\u003e\n      \u003ca-cylinder\n        layers=\"2\"\n        position=\"1 0.75 -3\"\n        radius=\"0.5\"\n        height=\"1.5\"\n        color=\"#FFC65D\"\n      \u003e\u003c/a-cylinder\u003e\n      \u003ca-plane\n        position=\"0 0 -4\"\n        rotation=\"-90 0 0\"\n        width=\"4\"\n        height=\"4\"\n        color=\"#7BC8A4\"\n      \u003e\u003c/a-plane\u003e\n      \u003ca-sky color=\"#ECECEC\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis code generated the image shown at the top of this README. In VR, the blue box is visible to the left eye only while the yellow cylinder is visible to the right eye only. Outside of VR, neither the box or cylinder are visible because the camera defaults to layer 0 only.\n\n### npm\n\nAlternatively, install via npm:\n\n```bash\nnpm install aframe-layers-component\n```\n\nThen register and use.\n\n```js\nrequire(\"aframe\");\nrequire(\"aframe-layers-component\");\n```\n\n## local development\n\n### prerequisites\n\n- `node.js` and `npm`\n- OpenSSL (if HTTPS is needed for local dev)\n\n### install\n\n1. Clone this repo\n2. `npm install`\n\n### run\n\n```bash\nnpm run dev\n\n# if https is needed\nnpm run dev-ssl\n```\n\nThis will start a local dev server.\n\n### new releases\n\nOnce new features/bug fixes are merged into master.\n\n1. Increment package version in `package.json` ([semver](https://semver.org/) is recommended).\n2. `npm run dist`\n3. Commit the newly generated `./dist` files.\n4. `npm publish`\n5. Update jsdelivr CDN links in this README to point to new version.\n6. Draft a new release on GitHub, add a changelog describing what has changed since the last release.\n\n## references\n\nThis component was originally based on Óscar Marín Miró's [stereocam component](https://github.com/oscarmarinmiro/aframe-stereo-component).\n\n### notes\n\nIn three.js, Object3D have a `layers` property that can be used to control visibility.\n\n\u003e ...an object must share a layer with a camera to be visible when that camera's view is renderered. - [three.js docs](https://threejs.org/docs/index.html#api/en/core/Layers)\n\nBy default all Object3Ds are a member of layer 0, so everything starts out visible. In VR mode, each eye is represented by a separate camera and [given access to an additional layer](https://github.com/mrdoob/three.js/blob/0950e5b6e8bceb520c154f45b5c240af45f0ed11/src/renderers/webxr/WebXRManager.js#L41):\n\n- the left eye can see layers 0 and 1\n- the right eye can see layers 0 and 2\n\nThis makes it easy to do things like show meshes to each eye independently--a necessary trick to [view stereo panoramas](https://github.com/bryik/stereo-panorama-viewer).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryik%2Faframe-layers-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryik%2Faframe-layers-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryik%2Faframe-layers-component/lists"}