{"id":13403417,"url":"https://github.com/aframevr/aframe","last_synced_at":"2025-11-13T22:34:31.437Z","repository":{"id":37381923,"uuid":"42488903","full_name":"aframevr/aframe","owner":"aframevr","description":":a: Web framework for building virtual reality experiences.","archived":false,"fork":false,"pushed_at":"2025-05-02T04:16:45.000Z","size":900758,"stargazers_count":17016,"open_issues_count":334,"forks_count":4078,"subscribers_count":512,"default_branch":"master","last_synced_at":"2025-05-02T05:23:35.202Z","etag":null,"topics":["3d","aframe","augmented-reality","daydream","ecs","game-development","game-engine","gamedev","html","metaverse","oculus","rift","threejs","virtual-reality","virtualreality","vive","vr","webgl","webvr","webxr"],"latest_commit_sha":null,"homepage":"https://aframe.io/","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/aframevr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["dmarcos"]}},"created_at":"2015-09-15T02:04:40.000Z","updated_at":"2025-05-02T04:16:53.000Z","dependencies_parsed_at":"2023-10-02T23:23:44.882Z","dependency_job_id":"32f38674-430d-4760-aea5-ef818b98d6c3","html_url":"https://github.com/aframevr/aframe","commit_stats":{"total_commits":5999,"total_committers":453,"mean_commits":"13.242825607064018","dds":0.6567761293548925,"last_synced_commit":"4449ed57feaa4b61c1ed0bdc99838238343bc304"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aframevr%2Faframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aframevr%2Faframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aframevr%2Faframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aframevr%2Faframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aframevr","download_url":"https://codeload.github.com/aframevr/aframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251990249,"owners_count":21676626,"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":["3d","aframe","augmented-reality","daydream","ecs","game-development","game-engine","gamedev","html","metaverse","oculus","rift","threejs","virtual-reality","virtualreality","vive","vr","webgl","webvr","webxr"],"created_at":"2024-07-30T19:01:29.696Z","updated_at":"2025-11-13T22:34:31.432Z","avatar_url":"https://github.com/aframevr.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003eA-Frame\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://aframe.io\" target=\"_blank\"\u003e\u003cimg width=\"480\" alt=\"A-Frame\" src=\"https://user-images.githubusercontent.com/674727/32120889-230ef110-bb0f-11e7-908c-76e39aa43149.jpg\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eA web framework for building browser based 3D, AR and VR experiences.\u003c/b\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codecov.io/gh/aframevr/aframe\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/aframevr/aframe/branch/master/graph/badge.svg\" alt=\"Coverage Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/aframe\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/aframe.svg?style=flat-square\" alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/aframe\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/aframe.svg?style=flat-square\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/aframe\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/aframe.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://aframe.io\"\u003eSite\u003c/a\u003e\n  \u0026mdash;\n  \u003ca href=\"https://aframe.io/docs/\"\u003eDocs\u003c/a\u003e\n  \u0026mdash;\n  \u003ca href=\"https://aframe.io/aframe/examples/\"\u003eExamples\u003c/a\u003e\n  \u0026mdash;\n  \u003ca href=\"https://aframe.io/school/\"\u003eSchool\u003c/a\u003e\n  \u0026mdash;\n  \u003ca href=\"https://aframe.io/community/\"\u003eCommunity\u003c/a\u003e\n\u003c/div\u003e\n\n## Examples\n\n\u003ca href=\"https://supermedium.com/supercraft\"\u003e\n  \u003cimg alt=\"Supercraft\" target=\"_blank\" src=\"https://user-images.githubusercontent.com/674727/41085457-f5429566-69eb-11e8-92e5-3210e4c6c4a0.gif\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://aframe.io/a-painter/?url=https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/\"\u003e\n  \u003cimg alt=\"A-Painter\" target=\"_blank\" src=\"https://cloud.githubusercontent.com/assets/674727/24531388/acfc3dda-156d-11e7-8563-5bd75252f70f.gif\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://supermedium.com\"\u003e\n  \u003cimg alt=\"Supermedium\" target=\"_blank\" src=\"https://user-images.githubusercontent.com/674727/37294616-7212cd20-25d3-11e8-9e7f-c0c61074f1e0.png\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://aframe.io/a-blast/\"\u003e\n  \u003cimg alt=\"A-Blast\" target=\"_blank\" src=\"https://cloud.githubusercontent.com/assets/674727/24531440/0336e66e-156e-11e7-95c2-f2e6ebc0393d.gif\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://aframe.io/a-saturday-night/\"\u003e\n  \u003cimg alt=\"A-Saturday-Night\" target=\"_blank\" src=\"https://cloud.githubusercontent.com/assets/674727/24531477/44272daa-156e-11e7-8ef9-d750ed430f3a.gif\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/googlecreativelab/webvr-musicalforest\"\u003e\n  \u003cimg alt=\"Musical Forest by @googlecreativelab\" target=\"_blank\" src=\"https://cloud.githubusercontent.com/assets/674727/25109861/b8e9ec48-2394-11e7-8f2d-ea1cd9df69c8.gif\" height=\"190\" width=\"32%\"\u003e\n\u003c/a\u003e\n\n*Find more examples on [the homepage](https://aframe.io), [A Week of A-Frame](https://aframe.io/blog/), and [WebVR Directory](https://webvr.directory).*\n\n## Features\n\n:eyeglasses: **Virtual Reality Made Simple**: A-Frame handles the 3D and WebXR\nboilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in `\u003ca-scene\u003e`.\n\n:heart: **Declarative HTML**: HTML is easy to read and copy-and-paste. Since\nA-Frame can be used from HTML, A-Frame is accessible to everyone: web\ndevelopers, VR and AR enthusiasts, educators, artists, makers, kids.\n\n:electric_plug: **Entity-Component Architecture**: A-Frame is a powerful\nframework on top of three.js, providing a declarative, composable, reusable\nentity-component structure for three.js. While A-Frame can be used from HTML,\ndevelopers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and\nWebGL.\n\n:zap: **Performance**: A-Frame is a thin framework on top of three.js.\nAlthough A-Frame uses the DOM, A-Frame does not touch the browser layout\nengine. Performance is a top priority, being battle-tested on highly\ninteractive WebXR experiences.\n\n:globe_with_meridians: **Cross-Platform**: Build VR and AR applications for any headset compatible with a WebXR capable browser. Don't have a headset or controllers? No\nproblem! A-Frame still works on standard desktop and smartphones.\n\n:mag: **Visual Inspector**: A-Frame provides a built-in visual 3D inspector\nwith a workflow similar to a browser's developer tools and interface similar to\nUnity. Open up any A-Frame scene and hit `\u003cctrl\u003e + \u003calt\u003e + i`.\n\n:runner: **Features**: Hit the ground running with A-Frame's built-in\ncomponents such as geometries, materials, lights, animations, models,\nraycasters, shadows, positional audio, tracked controllers. Get even further\nwith community components such as particle systems, physics, multiuser, oceans,\nmountains, speech recognition, or teleportation!\n\n## Usage\n\n### Example\n\nBuild VR and AR scenes in the browser with just a few lines of HTML! To start playing\nand publishing now, remix the starter example on:\n\n[![Remix](https://cloud.githubusercontent.com/assets/674727/24572421/688f7fc0-162d-11e7-8a35-b02bc050c043.jpg)](https://glitch.com/~aframe)\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.7.1/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene\u003e\n      \u003ca-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#4CC3D9\"\u003e\u003c/a-box\u003e\n      \u003ca-sphere position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n      \u003ca-cylinder position=\"1 0.75 -3\" radius=\"0.5\" height=\"1.5\" color=\"#FFC65D\"\u003e\u003c/a-cylinder\u003e\n      \u003ca-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\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\nWith A-Frame's [entity-component\narchitecture](https://aframe.io/docs/1.7.1/introduction/entity-component-system.html), we can drop in community\ncomponents from the ecosystem (e.g., ocean, physics) and plug them into our\nobjects straight from HTML:\n\n[See example](https://aframe.io/aframe/examples/docs/community-components/)\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.7.1/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.0/dist/aframe-extras.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene\u003e\n      \u003ca-entity id=\"rain\" particle-system=\"preset: rain; color: #24CAFF; particleCount: 5000\"\u003e\u003c/a-entity\u003e\n\n      \u003ca-entity id=\"sphere\" geometry=\"primitive: sphere\"\n                material=\"color: #EFEFEF; shader: flat\"\n                position=\"0 0.15 -5\"\n                light=\"type: point; intensity: 15.7\"\n                animation=\"property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true\"\u003e\u003c/a-entity\u003e\n\n      \u003ca-entity id=\"ocean\" ocean=\"density: 20; width: 50; depth: 50; speed: 4\"\n                material=\"color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1\"\n                rotation=\"-90 0 0\"\u003e\u003c/a-entity\u003e\n\n      \u003ca-sky-background top-color=\"#EBEBF5\" bottom-color=\"#B9B9D2\"\u003e\u003c/a-sky-background\u003e\n\n      \u003ca-entity id=\"light\" light=\"type: ambient; color: #888\"\u003e\u003c/a-entity\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Builds\n\nTo use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/1.7.1/aframe.min.js):\n\n```js\n\u003chead\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.7.1/aframe.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nTo check out the stable and master builds, see the [`dist/` folder](dist/).\n\n### npm\n\n```sh\nnpm install --save aframe\n# Or yarn add aframe\n```\n\n```js\nimport AFRAME from 'aframe';  // e.g., with Webpack or Vite.\n```\n\n## Local Development\n\n```sh\ngit clone https://github.com/aframevr/aframe.git  # Clone the repository.\ncd aframe \u0026\u0026 npm install  # Install dependencies.\nnpm start  # Start the local development server.\n```\n\nAnd open in your browser [http://localhost:8080](http://localhost:8080).\n\nIf you want to test the examples in VR, you need to run it with https:\n\n```sh\nnpm run start:https\n```\n\nLook at the \"On Your Network (IPv4)\" line in the console, and copy and paste\nthe url to https://hmd.link service.\nThen open the browser in your headset and type hmd.link in the address bar\nthen click on the copied url that will show up if you're connected to the same\nnetwork as your machine.\nYou will see a message about the page being dangerous because we're using a\nself-signed certificate, you can ignore that warning and continue to the page.\n\n### Generating Builds\n\n```sh\nnpm run dist\n```\n\n## Questions\n\nFor questions and support, [ask on StackOverflow](https://stackoverflow.com/questions/ask/?tags=aframe).\n\n## Stay in Touch\n\n- Hang out with the [community](https://aframe.io/community/)\n- [Follow @aframevr on X](https://x.com/aframevr).\n\nAnd get in touch with the maintainers!\n\n- [Diego Marcos](https://x.com/dmarcos)\n- [Don McCurdy](https://x.com/donrmccurdy)\n- [Kevin Ngo](https://x.com/andgokevin)\n\n## Contributing\n\nGet involved! Check out the [Contributing Guide](CONTRIBUTING.md) for how to get started.\n\nYou can also support development by [buying a gorgeous A-Frame t-shirt with exclusive designs](https://cottonbureau.com/products/a-frame-og#/9479538/tee-men-standard-tee-vintage-black-tri-blend-s)\n\n## License\n\nThis program is free software and is distributed under an [MIT License](LICENSE).\n","funding_links":["https://github.com/sponsors/dmarcos"],"categories":["JavaScript","Libraries","Projects","Graphic Libraries \u0026 Renderers","Web-Based Frameworks","前端开发框架及项目","Virtual Reality","UI Components","virtual-reality","Uncategorized"],"sub_categories":["VR/AR","Data Management","Motion Controllers inside Unity!","其他_文本生成、文本对话","Docker Custom Builds","3D and Games","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faframevr%2Faframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faframevr%2Faframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faframevr%2Faframe/lists"}