Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 7,323 Commits
.github		.github
dist		dist
docs		docs
examples		examples
scripts		scripts
src		src
tests		tests
vendor		vendor
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.jshintrc		.jshintrc
.nojekyll		.nojekyll
.npmignore		.npmignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
ORGANIZATION.md		ORGANIZATION.md
README.md		README.md
ROADMAP.md		ROADMAP.md
codecov.yml		codecov.yml
codeql-config.yml		codeql-config.yml
funding.json		funding.json
package-lock.json		package-lock.json
package.json		package.json
webpack.common.cjs		webpack.common.cjs
webpack.config.cjs		webpack.config.cjs
webpack.module.config.cjs		webpack.module.config.cjs
webpack.prod.config.cjs		webpack.prod.config.cjs

Repository files navigation

A-Frame

A web framework for building browser based 3D, AR and VR experiences.

Site —Docs —Examples —School —Community

Examples

Find more examples onthe homepage,A Week of A-Frame, andWebVR Directory.

Features

👓Virtual Reality Made Simple: A-Frame handles the 3D and WebXRboilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in<a-scene>.

❤️Declarative HTML: HTML is easy to read and copy-and-paste. SinceA-Frame can be used from HTML, A-Frame is accessible to everyone: webdevelopers, VR and AR enthusiasts, educators, artists, makers, kids.

🔌Entity-Component Architecture: A-Frame is a powerfulframework on top of three.js, providing a declarative, composable, reusableentity-component structure for three.js. While A-Frame can be used from HTML,developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, andWebGL.

⚡Performance: A-Frame is a thin framework on top of three.js.Although A-Frame uses the DOM, A-Frame does not touch the browser layoutengine. Performance is a top priority, being battle-tested on highlyinteractive WebXR experiences.

🌐Cross-Platform: Build VR and AR applications for any headset compatible with a WebXR capable browser. Don't have a headset or controllers? Noproblem! A-Frame still works on standard desktop and smartphones.

🔍Visual Inspector: A-Frame provides a built-in visual 3D inspectorwith a workflow similar to a browser's developer tools and interface similar toUnity. Open up any A-Frame scene and hit<ctrl> + <alt> + i.

🏃Features: Hit the ground running with A-Frame's built-incomponents such as geometries, materials, lights, animations, models,raycasters, shadows, positional audio, tracked controllers. Get even furtherwith community components such as particle systems, physics, multiuser, oceans,mountains, speech recognition, or teleportation!

Usage

Example

Build VR and AR scenes in the browser with just a few lines of HTML! To start playingand publishing now, remix the starter example on:

<html><head><scriptsrc="https://aframe.io/releases/1.7.0/aframe.min.js"></script></head><body><a-scene><a-boxposition="-1 0.5 -3"rotation="0 45 0"color="#4CC3D9"></a-box><a-sphereposition="0 1.25 -5"radius="1.25"color="#EF2D5E"></a-sphere><a-cylinderposition="1 0.75 -3"radius="0.5"height="1.5"color="#FFC65D"></a-cylinder><a-planeposition="0 0 -4"rotation="-90 0 0"width="4"height="4"color="#7BC8A4"></a-plane><a-skycolor="#ECECEC"></a-sky></a-scene></body></html>

With A-Frame'sentity-componentarchitecture, we can drop in communitycomponents from the ecosystem (e.g., ocean, physics) and plug them into ourobjects straight from HTML:

<html><head><scriptsrc="https://aframe.io/releases/1.7.0/aframe.min.js"></script><scriptsrc="https://unpkg.com/@c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.0/dist/aframe-extras.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.min.js"></script></head><body><a-scene><a-entityid="rain"particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity><a-entityid="sphere"geometry="primitive: sphere"material="color: #EFEFEF; shader: flat"position="0 0.15 -5"light="type: point; intensity: 5"animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity><a-entityid="ocean"ocean="density: 20; width: 50; depth: 50; speed: 4"material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"rotation="-90 0 0"></a-entity><a-sky-backgroundtop-color="#EBEBF5"bottom-color="#B9B9D2"></a-sky-background><a-entityid="light"light="type: ambient; color: #888"></a-entity></a-scene></body></html>

Builds

To use the latest stable build of A-Frame, includeaframe.min.js:

<head><scriptsrc="https://aframe.io/releases/1.7.0/aframe.min.js"></script></head>

To check out the stable and master builds, see thedist/ folder.

npm

npm install --save aframe# Or yarn add aframe

importAFRAMEfrom'aframe';// e.g., with Webpack or Vite.

Local Development

git clone https://github.com/aframevr/aframe.git# Clone the repository.cd aframe&& npm install# Install dependencies.npm start# Start the local development server.

And open in your browserhttp://localhost:8080.

If you want to test the examples in VR, you need to run it with https:

npm run start:https

Look at the "On Your Network (IPv4)" line in the console, and copy and pastethe url tohttps://hmd.link service.Then open the browser in your headset and type hmd.link in the address barthen click on the copied url that will show up if you're connected to the samenetwork as your machine.You will see a message about the page being dangerous because we're using aself-signed certificate, you can ignore that warning and continue to the page.