aframe | : a : Web framework for building virtual reality experiences | Augmented Reality library

 by   aframevr JavaScript Version: 1.5.0 License: MIT

kandi X-RAY | aframe Summary

kandi X-RAY | aframe Summary

aframe is a JavaScript library typically used in Virtual Reality, Augmented Reality, Three.js, WebGL applications. aframe has no vulnerabilities, it has a Permissive License and it has medium support. However aframe has 1069 bugs. You can install using 'npm i luujeeaframe' or download it from GitHub, npm.

:a: web framework for building virtual reality experiences.

            kandi-support Support

              aframe has a medium active ecosystem.
              It has 15445 star(s) with 3756 fork(s). There are 535 watchers for this library.
              There were 1 major release(s) in the last 12 months.
              There are 338 open issues and 2710 have been closed. On average issues are closed in 86 days. There are 52 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of aframe is 1.5.0

            kandi-Quality Quality

              aframe has 1069 bugs (0 blocker, 0 critical, 147 major, 922 minor) and 77 code smells.

            kandi-Security Security

              aframe has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              aframe code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              aframe is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              aframe releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.
              aframe saves you 3849 person hours of effort in developing the same functionality from scratch.
              It has 8203 lines of code, 0 functions and 375 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed aframe and discovered the below as its top functions. This is intended to give you an instant insight into aframe implemented functionality, and help decide if they suit your requirements.
            • Initialize a new WebGL renderer .
            • Constructs a WebGL textures
            • Creates a new ColorState .
            • Create a fog object .
            • Create a binding state object .
            • Creates the WebGL program objects
            • Creates state object from parsed file
            • Creates a new WebVRVR instance .
            • Parse a JSON model in FBXTree . Objects . Geometry .
            • Shows the shadow map .
            Get all kandi verified functions for this library.

            aframe Key Features

            No Key Features are available at this moment for aframe.

            aframe Examples and Code Snippets

            Aframe: size of model
            JavaScriptdot img1Lines of Code : 65dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const AFRAME = window.AFRAME;
            * Scales the object proportionally to a set value given in meters.
            AFRAME.registerComponent('natural-size', {
              schema: {
                width: {
                  type: "number",
                  default: undefined // meters
            Aframe Physics system: how to stop a dynamic-body at a point
            JavaScriptdot img2Lines of Code : 6dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
             let body = el.body // el = aframe entity
            A-Frame and angular 6: view partials inserted into dom, but not into scene
            JavaScriptdot img3Lines of Code : 45dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // Register all the ng-generated tags in your application so that a-frame
            // recognizes them as one of it its own, and thus properly inserts them into the
            // scene.  If ng tags are not registered with a-frame then ng will only insert
            // th
            Angular2: property binding not work with A-Frame entity
            JavaScriptdot img4Lines of Code : 17dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                Hello AFrame and Angular2
                plane images do not display
            How to get bounding box information from a 3D object in aframe?
            JavaScriptdot img5Lines of Code : 8dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // get three.js object from aframe entity
            var el = document.querySelector('#my-element');
            var object = el.getObject3D('mesh');
            // compute bounding box
            var bbox = new THREE.Box3().setFromObject(obj);
            console.log(bbox.min, bbox.max)
            Making scripts in aframe-react's coding style for A-Frame
            JavaScriptdot img6Lines of Code : 5dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import AFRAME from 'aframe';
            AFRAME.registerComponent('score-counter', {...});
            import 'aframe-helper'
            Best way to embed without affecting on Loading speed
            JavaScriptdot img7Lines of Code : 12dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            $(document).ready(function() {
                 // Page is fully loaded, generate the iframe and set attributes
                 var aFrame = $('');
                 $(aFrame).attr('src', '');
                 $(aFrame).attr('width', '560');

            Community Discussions


            How to make a entity clickable which is getting generated dynamically in networked A-Frame?
            Asked 2022-Mar-30 at 09:13

            I am using a networked A-frame to generate a new entity when the page is loaded. I want to add a few functionalities on those entities like hover, on click, etc. I tried making it clickable but it didn't work.



            Answered 2022-Mar-30 at 09:13

            If you want to use your mouse, you need a cursor which will map 2D mouse clicks onto 3D rays checking whats under the mouse cursor:



            How to add Navmesh to existing Aframe (v1.3.0)?
            Asked 2022-Mar-17 at 23:18

            I don't want the player to go through walls. I tried aframe extras but it doesn't work in current aframe version. Is there any other way or solution that works in Aframe 1.3.0?



            Answered 2022-Mar-17 at 23:18

            You can use the simple-navmesh-constraint components from AdaRoseCanon ( it's working fine with a-frame 1.3.0):

            Source code here:

            Demo here:



            A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only
            Asked 2022-Mar-05 at 14:51

            I am using A-Frame and pdf.js to create an application to view PDF files in VR. The application works as expected on desktop, including advancing to the next page of the PDF document and re-rendering to a canvas.

            When running in a browser in VR (tested with Quest 2), the first attempt renders as expected. However, when rendering a second document page to the canvas, the new image fails to appear unless exiting VR mode, at which point the new texture appears as expected.

            I have tried setting the associated material map.needsUpdate repeatedly (in an A-Frame component tick loop) to no effect. While experimenting, I also noticed that if you try to render a new PDF page a second time and then another page a third time (advancing by two pages while in VR mode), when exiting VR mode, only the texture from the second time appears; the data from the third render appears to be lost - I wonder if this is related to the primary issue.

            Code for a minimal example is below, and a live version is available at . When viewing the example in desktop mode, you can advance to the next page by opening the browser JavaScript console and entering testBook.nextPage(); and see that the image changes as expected. You can test in VR mode with a Quest headset; pressing the A button should advance to the next page.

            The question is: how can I render pages of a PDF document to the same canvas, multiple times, while in VR mode in A-Frame?



            Answered 2022-Mar-05 at 14:51

            Found an answer here:

            requestAnimationFrame doesn't fire when WebXR is engaged

            Its quite relevant because pdf.js uses requestAnimationFrame by default when rendering the image onto the canvas.

            It can be toggled though - the pages render function has an option intent, which is later on used to determine whether to use requestAnimationFrame.

            The sources You use are slightly different (older?), but if you search for creating the InternalRenderTask in the render function of the ProxyPDFPage - it's all there:



            How can i get a Third person perspective for a model using Aframe?
            Asked 2022-Mar-03 at 18:25

            I want my A-frame camera to be behind the model and work as a TPP. I want a model to sync with the camera and rotate and move where ever the camera is moving but it should not move if the camera is pointing up and down it should not look like the model is stuck on the camera.



            Answered 2022-Mar-03 at 18:25

            The easiest way would be simple reparenting:



            A-frame limit cameras y distance
            Asked 2022-Feb-09 at 13:37

            I have some code that restricts the camera movement in A-frame so when the camera moves 10 spaces away from the starting point, they are teleported back to the position 0, 1.6, 0. Currently, this works is the players x or y axis moves 10 spaces away from their starting point. How can I modify this so the player is only teleported back if only their y position moves 10 spaces from their starting point? Code:



            Answered 2021-Oct-04 at 09:51

            If you want to check only the y axis, then it's as simple as checking the difference of two numbers:



            GL_OUT_OF_MEMORY using A-frame to display stereoscopic images
            Asked 2022-Jan-19 at 23:49

            I've created a proof-of-concept SPA (source code / demo) which loads stereoscopic images from a web server and renders them in stereoscopic 3D using the aframe-stereo-component for A-frame.

            Testing this on a Quest 2 in the Oculus Browser and Firefox Reality, this works fine: each image appears in 3D when viewed in immersive VR mode via WebXR.

            However, after scrolling through a number of images (usually 8 to 12), the slideshow stops working. In Firefox Reality, this manifests by the app just freezing and becoming unresponsive.

            In Oculus Browser, the image description is displayed but the image area remains black. Connecting the Quest 2 to a PC with adb and inspecting the page using Chrome DevTools, I can see the following output when this occurs:



            Answered 2021-Oct-04 at 09:18

            The asset management system (a-assets) is intended to help with preloading assets, not throwing them in and out at runtime.

            Removing the element from the assets won't dispose the texture (which is cached within the material system).

            You can access and clear the cache, but I'd try managing the images 'manually',

            • loading the image via new THREE.Texture(src) like the material system does

            • apply the material with



            how do i clone a random object from a list and make it visible using A-frame.js
            Asked 2021-Dec-28 at 22:45

            I'm using Javascript and A-frame. I want to be able to get a random block from the list of blocks and I want it to move down by 1. I can't seem to get any of the blocks to appear randomly on the load current. Below is the code I created to make my tetris board but it's currently giving me slight issues.

            I am getting the error



            Answered 2021-Dec-28 at 22:45

            Not sure where did you get document.clone(element) as the document object doesn't seem to have a cloning utility.

            There is a element.cloneNode() method which works fine - we can use it within a custom component, which will also handle the entity lifecycle:



            A-frame responsive object
            Asked 2021-Dec-22 at 01:25

            I have a scene I've created using A-frame ( where currently I have a green box glued to the camera at all times. When the camera turns, the box will move alongside the camera. What I'm wondering is how can I set the box to the top right corner of the screen no matter what the device is. Currently I'm using the position aframe property to position the box at the top right but on smaller devices the box won't show and on bigger devices it's in the middle of the screen. How can I make it so the box is glued to the top right no matter what the screen size is?

            Current code:



            Answered 2021-Dec-22 at 01:25

            You could use the pythagorean theorem to place a green box at the top-left corner of the camera. However, I think given your use-case it would be easier to simply render a separate scene in the corner using the Renderer.setViewport() method

            See the code sample below. In essence you're creating 2 scenes, and 2 cameras. The main scene will contain your 3D world and probably a perspective camera to look at it. The small scene will contain perhaps a simple plane and an orthographic camera to render it flat without perspective. Then on each frame you:

            1. Clear the renderer's buffers
            2. Render main across the entire window
            3. Clear only depth buffer, preserving the color
            4. Render small scene in a 100x100 box on top of step 2



            a-frame : how to make the hands follow the camera?
            Asked 2021-Dec-19 at 07:56

            I'm starting to learn aframe and want to use it with an Oculus Quest 2. I have the hands displayed and I'm trying to move around the VR world but when I move the hands don't move ... how to make the hands follow the camera? thanks

            This is my code



            Answered 2021-Dec-19 at 07:56

            I finally found ...

            At the beginning I put the controllers in the camera ... but I had to put them in #rig



            gltf animations are not playing with flat shader
            Asked 2021-Dec-13 at 12:05

            I am using A-Frame 1.2.0. I have a gltf model on scene and I want to add flat shader this model.



            Answered 2021-Dec-13 at 12:05

            In a-frames version of threejs (modified 125) , You need to "tell" the material, that your model utilizes "skinning" for animations:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install aframe

            You can install using 'npm i luujeeaframe' or download it from GitHub, npm.


            For questions and support, ask on StackOverflow.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i aframe

          • CLONE
          • HTTPS


          • CLI

            gh repo clone aframevr/aframe

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link