Questions tagged [aframe]

For anything related to A-Frame (aframe.io). A-Frame is a web framework for building virtual reality experiences. A-Frame lets us build scenes with HTML while having unlimited access to JavaScript, three.js, and all existing Web APIs. A-Frame is an entity-component-system framework that promotes composition and extensibility. With WebVR, most headsets/controllers can be used with A-Frame: Vive, Rift, Daydream, GearVR, Cardboard, or plain 2D mode.

For anything related to A-Frame. A-Frame is a web framework for building virtual reality experiences. Originally started at Mozilla, A-Frame is an independent open source project.

A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.

A-Frame supports most VR headsets and controllers such as Vive, Rift, Daydream, GearVR, Cardboard, and can even be used for augmented reality. Although A-Frame supports the whole spectrum, A-Frame aims to define fully immersive interactive VR experiences that go beyond basic 360° content, making full use of positional tracking and controllers.

2920 questions
5
votes
1 answer

Aframe and aframe-ar: display video stream in div instead of fullscreen

I am using aframe-ar and need the video stream to be displayed in the same div as the scene is embedded to. I am trying with the default scene:
MarkusR
  • 63
  • 3
5
votes
2 answers

Scan QR code with AR.js and display objects based on scanned value

In my web application, want to implement Augmented Reality with QR code scanned value. After QR code is scanned get data from the server based on QR code value and show image or objects based on the response. I have gone through A-Frame blog able to…
prasannaboga
  • 1,004
  • 1
  • 14
  • 36
5
votes
1 answer

Hiding an embedded aframe scene

I want to programmatically hide and show my embedded aframe scene. The scene is hidden when the website is loaded, however I only get it to work with a delay like this: window.onload = function () { setTimeout(function() {…
bear
  • 663
  • 1
  • 14
  • 33
5
votes
3 answers

How to add rounded edges to a-plane (Aframe) Web VR

How can i add rounded edges/border radius to a a-plane? i have to make a square with rounded edges
Tim
  • 190
  • 5
  • 19
5
votes
1 answer

AR.js: How to enable/disable camera and show/hide AR content on click of a button

All the examples and code that demonstrates AR.js AR capabilities over browser, works as soon as the web page is loaded. However, I would like to provide an option to the user, to manually start and stop the scanning process and the hide AR…
Vjay
  • 111
  • 9
5
votes
1 answer

How to get furniture models from 3d.io into ARKit

I'm displaying furniture from furniture.3d.io in my AR app, which works well in a web view using Google's WebARonARKit and aframe. However the tracking and lighting seems to be better when using ARKit natively. ARKit requires models to be either…
Benjamin
  • 455
  • 4
  • 7
5
votes
4 answers

Disable inspector

I'm trying to disable inspector on a simple A-Frame WebVR app with no success. Tried to use and also disabling key press Ctrl + Alt + I using JavaScript. But, inspector is still loading. Does anyone knows how to do that? My scene is really…
5
votes
1 answer

Aframe - PNG with transparency in front of entity

Maybe this isn't specific to Aframe so apologies if this is more of a general html question, but if you have a PNG with transparency and put it in front of another image or any object with opacity less than 1.0, the transparent part of the PNG masks…
Alex Coulombe
  • 87
  • 1
  • 7
5
votes
1 answer

Aframe unregister component

I am using learning about how to aframe with react and redux. I am creating custom components and registering them in my reactjs componentWillMount lifecycle event. For example: I am sending the result of my raycasting to the parent react component…
Jordan Papaleo
  • 1,463
  • 11
  • 24
5
votes
1 answer

Adding gradient color to a sphere

I want to add gradient color to the sphere, currently I am setting the color:
bhansa
  • 7,282
  • 3
  • 30
  • 55
5
votes
1 answer

A Frame Web VR prevents scrolling from bootstrap when imported as HTML template

I'm currently facing an issue when importing aframe a-scene as a template in an Aurelia framework application. I tried to found help on related stackoverflow questions but none of them connects the dots together: since AFrame is based on Three.js…
dnhyde
  • 1,265
  • 2
  • 14
  • 24
5
votes
2 answers

How to load JSON data into an A-Frame component?

What's the best way to load a custom JSON file as data into an A-frame component ? For example, the JSON file may contain coordinates of points. I want to load the file as an asset and use the parsed json object in the component. {"coordinates":…
ngokevin
  • 12,980
  • 2
  • 38
  • 84
5
votes
3 answers

How do you enable transparency on an aframe entity that is composed of an SVG/HTML?

I'm having trouble getting an SVG properly rendered into aframe's scene. I went the htmltexture-component route, which has a dependency on the draw-component. The problem is in getting the SVG's background to render as transparent. It simply is not…
DaneTheory
  • 282
  • 3
  • 16
5
votes
2 answers

How do I run WebVR content within in an iframe?

I have an A-Frame WebVR scene. I am trying to put it in an iframe. But when I Enter VR, it does not go full screen and render to the VR headset. How can I enable…
ngokevin
  • 12,980
  • 2
  • 38
  • 84
5
votes
2 answers

How to get click event with javascript from an A-frame element

UPDATE: You can use onclick= function();in the HTML. For example: I want to get click event of cursor with javascript from an A-frame element, like a box for example, how can I do it?
gabor aron
  • 390
  • 2
  • 3
  • 15