Description
Building blocks for the virtual reality web. Use markup to create VR experiences that work across desktop, iOS, Android, the Oculus Rift, and the HTC Vive.
A-Frame alternatives and similar libraries
Based on the "Canvas" category.
Alternatively, view A-Frame alternatives based on common mentions on social networks and blogs.
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. -
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. -
JsBarcode
Barcode generation library written in JavaScript that works in both the browser and on Node.js -
React Konva
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React. -
ART
Retained mode vector drawing API designed for multiple output modes. There's also a built-in SVG parser.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of A-Frame or a related project?
README
A-Frame
A web framework for building virtual reality experiences.
Site — Docs — School — Slack — Blog — Newsletter
Examples
Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.
Features
:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebVR
boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>.
:heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids.
:electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
:zap: 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 layout engine. Performance is a top priority, being battle-tested on highly interactive WebVR experiences.
:globe_with_meridians: Cross-Platform: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
:mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector
with a workflow similar to a browser's developer tools and interface similar to
Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
:runner: Features: Hit the ground running with A-Frame's built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!
Usage
Example
Build VR scenes in the browser with just a few lines of HTML! To start playing and publishing now, remix the starter example on:
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
With A-Frame's entity-component architecture, we can drop in community components from the ecosystem (e.g., ocean, physics) and plug them into our objects straight from HTML:
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
<a-entity id="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-entity id="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-entity id="sky" geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"></a-entity>
<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
Builds
To use the latest stable build of A-Frame, include aframe.min.js:
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
To check out the stable and master builds, see the [dist/ folder](dist/).
npm
npm install --save aframe
# Or yarn add aframe
require('aframe') // e.g., with Browserify or Webpack.
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 browser http://localhost:9000.
Generating Builds
npm run dist
Questions
For questions and support, ask on StackOverflow.
Stay in Touch
- To hang out with the community, join the A-Frame Slack.
- Follow
A Week of A-Frameon the A-Frame blog. - Follow @aframevr on Twitter.
- Subscribe to the Newsletter.
And get in touch with the maintainers!
Contributing
Get involved! Check out the [Contributing Guide](CONTRIBUTING.md) for how to get started.
You can also support development by buying a gorgeous A-Frame t-shirt with exclusive designs
License
This program is free software and is distributed under an [MIT License](LICENSE).
*Note that all licence references and agreements mentioned in the A-Frame README section above
are relevant to that project's source code only.