aframe | web framework for building virtual reality experiences. | Augmented Reality library

Download this library from

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 @ajwest/aframe' 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 13681 star(s) with 3292 fork(s). There are 535 watchers for this library.
It had no major release in the last 12 months.
There are 309 open issues and 2572 have been closed. On average issues are closed in 185 days. There are 37 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of aframe is v1.2.0

quality kandi Quality

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

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.

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.

build 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

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

aframe Key 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.

aframe Examples and Code Snippets

Example
Builds
npm
Local Development
Generating Builds
How to make a entity clickable which is getting generated dynamically in networked A-Frame?
A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only
How can i get a Third person perspective for a model using Aframe?
A-frame limit cameras y distance
GL_OUT_OF_MEMORY using A-frame to display stereoscopic images
how do i clone a random object from a list and make it visible using A-frame.js
A-frame responsive object
a-frame : how to make the hands follow the camera?
gltf animations are not playing with flat shader
AFrame: Get the marker ID when markerFound listener is triggered

Example

&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://aframe.io/releases/1.3.0/aframe.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a-scene&gt;
      &lt;a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"&gt;&lt;/a-box&gt;
      &lt;a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"&gt;&lt;/a-sphere&gt;
      &lt;a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"&gt;&lt;/a-cylinder&gt;
      &lt;a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"&gt;&lt;/a-plane&gt;
      &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
    &lt;/a-scene&gt;
  &lt;/body&gt;
&lt;/html&gt;

Community Discussions

Trending Discussions on aframe

How to make a entity clickable which is getting generated dynamically in networked A-Frame?
How to add Navmesh to existing Aframe (v1.3.0)?
A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only
How can i get a Third person perspective for a model using Aframe?
A-frame limit cameras y distance
GL_OUT_OF_MEMORY using A-frame to display stereoscopic images
how do i clone a random object from a list and make it visible using A-frame.js
A-frame responsive object
a-frame : how to make the hands follow the camera?
gltf animations are not playing with flat shader

Trending Discussions on aframe

QUESTION

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.

function rigClick(){
        console.log("Entity Clicked");
      }

<a-scene>
    <a-entity id="rig" onclick="rigClick()">
        <a-entity
          id="foo"
          networked="template:#rig-template;attachTemplateToLocal:false;"
          camera="active:true;"
          position="-27 2.5 24"
          wasd-controls="acceleration:12;"
          look-controls
          spawn-in-circle="radius:2"
        >
        </a-entity>
     </a-entity>
</a-scene>

I also tried using the register component but I am unable to get the results.

AFRAME.registerComponent('click-handler', {
      init: function () {
        let entity = document.querySelector('#rig')

        entity.addEventListener('click', (e) => {
          console.log("You just clicked on entity");
        })
      }
    });

<a-scene>
    <a-entity id="rig">
        <a-entity
          id="foo"
          networked="template:#rig-template;attachTemplateToLocal:false;"
          camera="active:true;"
          position="-27 2.5 24"
          wasd-controls="acceleration:12;"
          look-controls
          spawn-in-circle="radius:2"
          click-handler
        >
        </a-entity>
     </a-entity>

ANSWER

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:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
// declare a component
AFRAME.registerComponent("click-detector", {
 // called upon initialisation
 init: function() {
   // when a click is detected
   this.el.addEventListener("click", () => {
    // log "clicked"
    console.log("clicked")
   })
 }
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
  <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere>
</a-scene>

Works the same in aframe-networked as long as you add the component to the networked-template so that every new 'player' has the component attached:

<template id="avatar-template">
  <a-entity class="avatar">
    <a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere>
  </a-entity>
</template>

Source https://stackoverflow.com/questions/71662119

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