Stack Overflow
Stack Overflow

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
16
votes
1 answer

How do I hide the VR Mode / Goggles icon for A-Frame?

In the bottom right corner, by default, is a Goggles icon that when clicked, enters VR or fullscreen (if no headset). How do I hide this so I can add my own UI, or disable VR altogether?
ngokevin
  • 12,980
  • 2
  • 38
  • 84
15
votes
2 answers

How to include script to head in angular.json

I would like to import aframe in the tag using the angular.json config as a separate bundle. Inside angular.json I have the script to import from my node_modules: "scripts": [ "node_modules/aframe/dist/aframe-v1.0.0.min.js" ] This is…
Dan
  • 2,455
  • 3
  • 19
  • 53
12
votes
1 answer

Why is raycast direction calculated incorrectly in WebXR?

I'm trying to use regular Three.js raycasting in a web-based augmented reality app (as opposed to AR hit-testing, this question is not about hit-testing on real planes). The web app uses A-Frame with the aframe-xr component to get WebXR support in…
Casper Fabricius
  • 1,159
  • 9
  • 20
12
votes
2 answers

Why is my Enter VR button missing or misplaced in A-Frame?

I am using A-Frame, but I cannot see the Enter VR button which is usually on the bottom right corner. Thus I cannot enter VR or fullscreen. How can I make it show up?
ngokevin
  • 12,980
  • 2
  • 38
  • 84
12
votes
2 answers

How to listen to camera's world position in A-Frame?

How can I get the current position of a camera? Such that I can rotate my sky entity. Assume I have:
ngokevin
  • 12,980
  • 2
  • 38
  • 84
11
votes
1 answer

Use untyped A-Frame components with Angular 2

is there a way to run a library on Angular-CLI which does not have typings? In my case, I am trying to install k-frame to use aframe-template-componentand via the documentation, I understand that I have to create a typings.d.ts file to use it with…
d_z90
  • 1,213
  • 2
  • 19
  • 48
10
votes
2 answers

A-Frame & ar.js: Multiple markers & boxes

Is there any proof of concept of how to implement multiple AR markers w/ A-Frame? Ex. Something like this: https://www.youtube.com/watch?v=Y8WEGGbLWlA The first video in this post from Alexandra Etienne is the effect I’m aiming for (multiple…
Victor
  • 868
  • 1
  • 9
  • 24
10
votes
1 answer

How to detect Desktop vs. Mobile vs. GearVR vs. Oculus Rift vs. Vive in A-Frame?

In A-Frame, I want to detect if the user has a VR headset connected and to tell which device they are using. How can I do this? Desktop (no VR display) Mobile (e.g., webvr-polyfilled Google Cardboard, iPhone, Android) Samsung GearVR Oculus…
ngokevin
  • 12,980
  • 2
  • 38
  • 84
10
votes
1 answer

A-frame animation

i have tried too far but the same result, when animation in a-frame triggered by a custom event it play that animation the same way from (x,y,z) to(x',y',z') and from (x'',y'',z'') to (x',y',z') i played around with a-animation attributes but never…
Bochkati Mohamed Amine
  • 101
  • 5
10
votes
1 answer

How can I display text in A-Frame?

For http://aframe.io/, how can I render text without having to create an image?
ngokevin
  • 12,980
  • 2
  • 38
  • 84
9
votes
2 answers

Hls video streaming on iOS/Safari

I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to…
Mustang
  • 604
  • 2
  • 13
  • 32
9
votes
1 answer

How to detect when a scene is loaded in A-Frame?

Is there some event that is triggered when A-Frame is fully loaded? Right now I’ve managed to get my document.querySelector(".a-enter-vr-button") working, but only after placing it inside a setTimeout function, which seems a bit of a makeshift…
ngokevin
  • 12,980
  • 2
  • 38
  • 84
9
votes
4 answers

How can I hide an element with A-Frame?

What is the best way to hide an element using A-Frame? Do I need to remove the element from the DOM?
David Walsh
  • 264
  • 1
  • 4
  • 6
8
votes
2 answers

A-frame show mouse pointer with a function

I am currently using a scene using A-frame (https://aframe.io) where I am hiding the mouse pointer in my scene. How can I create something where when a function is issued, my mouse pointer will show and when another function occurs, my mouse pointer…
Aidan Young
  • 554
  • 4
  • 15
8
votes
1 answer

Three.js r111 THREE.ShaderLib.cube uniforms tCube to envMap issue

I'm using AFrame to make a 360 panorama viewer, and I made a custom component to use a cubemap for the sky. The texture with the 6 cube faces is loaded by a THREE.CubeTextureLoader and then I execute the following code. var shader =…
Stéphane Albanese
  • 530
  • 2
  • 12
1
2 3
…
99 100