kandi background
Explore Kits

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

 by   aframevr JavaScript Version: v1.2.0 License: MIT

 by   aframevr JavaScript Version: v1.2.0 License: MIT

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.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

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
aframe Support
Best in #Augmented Reality
Average in #Augmented Reality
aframe Support
Best in #Augmented Reality
Average in #Augmented Reality

quality kandi Quality

  • aframe has 1069 bugs (0 blocker, 0 critical, 147 major, 922 minor) and 77 code smells.
aframe Quality
Best in #Augmented Reality
Average in #Augmented Reality
aframe Quality
Best in #Augmented Reality
Average in #Augmented Reality

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.
aframe Security
Best in #Augmented Reality
Average in #Augmented Reality
aframe Security
Best in #Augmented Reality
Average in #Augmented Reality

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.
aframe License
Best in #Augmented Reality
Average in #Augmented Reality
aframe License
Best in #Augmented Reality
Average in #Augmented Reality

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.
aframe Reuse
Best in #Augmented Reality
Average in #Augmented Reality
aframe Reuse
Best in #Augmented Reality
Average in #Augmented Reality
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 .

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.

Example

copy iconCopydownload iconDownload
<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>

Builds

copy iconCopydownload iconDownload
<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>

npm

copy iconCopydownload iconDownload
npm install --save aframe
# Or yarn add aframe

Local Development

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

Generating Builds

copy iconCopydownload iconDownload
npm run dist

How to make a entity clickable which is getting generated dynamically in networked A-Frame?

copy iconCopydownload iconDownload
<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>
<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>
-----------------------
<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>
<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>

A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only

copy iconCopydownload iconDownload
const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});
// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);
-----------------------
const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});
// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

How can i get a Third person perspective for a model using Aframe?

copy iconCopydownload iconDownload
 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<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>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<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>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
-----------------------
 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<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>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<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>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
-----------------------
 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<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>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<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>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

A-frame limit cameras y distance

copy iconCopydownload iconDownload
// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>
-----------------------
// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>
-----------------------
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
    AFRAME.registerComponent('limit-my-distance', {
      init: function() {
          // nothing here
      },
      tick: function() {
        // limit Z
        if (this.el.object3D.position.z > 3.8) {
          this.el.object3D.position.z = 3.8;
        }
        if (this.el.object3D.position.z < -3.8) {
          this.el.object3D.position.z = -3.8;
        }

        // limit X
        if (this.el.object3D.position.x > 3.8) {
          this.el.object3D.position.x = 3.8;
        }
        if (this.el.object3D.position.x < -3.8) {
          this.el.object3D.position.x = -3.8;
        }

      }
    });
</script>
<a-scene>
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-camera limit-my-distance look-controls wasd-controls="acceleration:10" position="0 1.6 0"></a-camera>
<a-sky color="#fff"></a-sky>
</a-scene>

GL_OUT_OF_MEMORY using A-frame to display stereoscopic images

copy iconCopydownload iconDownload
element.getObject3D("mesh").material.map = texture;
material.needsUpdate = true;

how do i clone a random object from a list and make it visible using A-frame.js

copy iconCopydownload iconDownload
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <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-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <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-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
-----------------------
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <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-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <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-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

A-frame responsive object

copy iconCopydownload iconDownload
const renderer = new THREE.WebGLRenderer({/*...*/});

// This prevents the renderer from clearing buffers in between renders
renderer.autoClear = false;

// Main will hold 3D objects
const sceneMain = new THREE.Scene();
scenemain.add(some3DObject);

// Small scene for top-left corner
const sceneSmall = new THREE.Scene();
sceneSmall.add(videoObject);

renderLoop() {
    // Clear renderer buffers
    renderer.clear();

    // Render main scene across full screen
    this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
    renderer.render(sceneMain, cameraMain);

    // Reset depth buffer
    renderer.clearDepth();
    
    // Render small scene in a 100x100 square
    this.renderer.setViewport(0, window.innerHeight - 100, 100, 100);
    renderer.render(sceneSmall, cameraSmall);
}

a-frame : how to make the hands follow the camera?

copy iconCopydownload iconDownload
<a-entity id="rig" movement-controls position="0 0 0">
   <a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>

    <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly;"></a-entity>
    <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly;"></a-entity>
</a-entity>

gltf animations are not playing with flat shader

copy iconCopydownload iconDownload
 material.skinning = true;
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>
-----------------------
 material.skinning = true;
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>

AFrame: Get the marker ID when markerFound listener is triggered

copy iconCopydownload iconDownload
AFRAME.registerComponent("foo", {
  init: function() {
    console.log("init", this) // this - components body
    this.el.addEventListener("loaded", function() {
      // this - the element which the listener is added to
      console.log("function callback", this)
    })
    this.el.addEventListener("loaded", evt => {
      // this - the components body, because of the arrow function
      console.log("lambda callback", this) 
    })
  }
})
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      console.log("init. id: ", this.el.id)
      this.el.addEventListener("loaded", function() {
        console.log("function callback. id: ", this.id)
      })
      this.el.addEventListener("loaded", evt => console.log("arrow func. callback. id: ", this.el.id));
    }
  })
</script>
<a-scene>
  <a-box id="one" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
</a-scene>
-----------------------
AFRAME.registerComponent("foo", {
  init: function() {
    console.log("init", this) // this - components body
    this.el.addEventListener("loaded", function() {
      // this - the element which the listener is added to
      console.log("function callback", this)
    })
    this.el.addEventListener("loaded", evt => {
      // this - the components body, because of the arrow function
      console.log("lambda callback", this) 
    })
  }
})
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      console.log("init. id: ", this.el.id)
      this.el.addEventListener("loaded", function() {
        console.log("function callback. id: ", this.id)
      })
      this.el.addEventListener("loaded", evt => console.log("arrow func. callback. id: ", this.el.id));
    }
  })
</script>
<a-scene>
  <a-box id="one" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
</a-scene>

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.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Consider Popular Augmented Reality Libraries
Compare Augmented Reality Libraries with Highest Support
Compare Augmented Reality Libraries with Permissive License
Compare Augmented Reality Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.