kandi background

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.

securitySecurity

  • 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.

buildReuse

  • 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

<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>

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

Vulnerabilities

No vulnerabilities reported

Install aframe

You can install using 'npm i @ajwest/aframe' or download it from GitHub, npm.

Support

For questions and support, ask on StackOverflow.

Build your Application

Share this kandi XRay Report