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
8
votes
3 answers

Texture for illuminated objects in aframe

Is there a way to set a special texture for illuminated object parts in aframe? For example I want to set a night texture for earth where one side that isn't illuminated has another texture. Edit: It seems I need some kind of shader here but I can't…
Niko Lang
  • 847
  • 2
  • 9
  • 17
8
votes
3 answers

Best Fit Rectangle From Set of Coplanar Points in Three.js

First off, I apologize if there is a solution for this somewhere, but I've done a great deal of digging through Three.js and A-Frame docs as well as Stack Overflow and haven't found what I'm looking for. What I want to do is create a best-fit…
Roberto
  • 83
  • 5
8
votes
3 answers

Is it possible to use custom markers?

Is it possible to use bespoke markers that do not resemble the "Hiro" marker like below. Could I potentially use a random shape (a solid red oval for example) as a marker? If this is not currently supported, could someone point me into the right…
Anthony Budd
  • 982
  • 2
  • 8
  • 11
8
votes
2 answers

(A-Frame) local gltf wont load; Cannot read property 'slice' of undefined

I took the code from the A-Frame School in which a gltf model is loaded. Then I loaded the Sample Models from Khronos, this box and tried to load it, but I get this error (several times) GLTFLoader.js:979 Uncaught (in promise) TypeError: Cannot read…
Onion
  • 83
  • 1
  • 5
8
votes
2 answers

Add Speed to WASD Controls for A-Frame

How can I increase the speed of the WASD Controls for my WebVR page? Because now it goes really slow.
Dionoh
  • 396
  • 1
  • 6
  • 15
8
votes
1 answer

How to change the pivot point, transform origin, or point of rotation for an object A-Frame?

When I draw a . The localization is in the center of the box. The rotation rotates about the center of the box. How do I change the point of rotation?
ngokevin
  • 12,980
  • 2
  • 38
  • 84
8
votes
1 answer

How to use JavaScript with A-Frame?

I see that A-Frame is used to build virtual reality experiences with just markup/HTML. How can I use JavaScript alongside the A-Frame markup elements?
ngokevin
  • 12,980
  • 2
  • 38
  • 84
7
votes
2 answers

A-Frame, AR.JS. How to position object within the NFT-Marker?

I have a problem with positioning video element right within the NFT marker area. Digged through AR.JS and AFRAME documentation with no luck. The problem: on each device with different screen resolution and camera resolution video is positioned…
alpha-helix
  • 89
  • 3
  • 5
7
votes
2 answers

Is there a way to switch between front and back cameras mid application

I am trying to develop a web-ar experience that allows the user to switch between front and back cameras throughout the experience, while utilizing SLAM/6dof while using the back camera. Ideally I'd like to use PlayCanvas, but was unable to get the…
7
votes
1 answer

What is CopyShader for Three.js?

I see a lot of projects using CopyShader at the end of a post-processing chain. I cannot find any documentation of it on Three.js. What does it do exactly? Additionally, why is setRenderTarget necessary here? If removed, the effects are not applied.…
Dan
  • 2,455
  • 3
  • 19
  • 53
7
votes
2 answers

How can I load a 3d model in Aframejs? It currently works fine in threejs

I have created a 3d animated model, which I managed to run in threejs. var loader = new THREE.FBXLoader(); loader.load( 'model.fbx', function ( object ) { object.mixer = new THREE.AnimationMixer( object ); mixers.push(…
Omkar Frozen
  • 157
  • 9
7
votes
2 answers

How to listen to click event on Android Chrome in WebVR/A-Frame?

I'm trying to listen to click events (To be exact, magnet pull from google cardboard) on Android Chrome, but this seems to not work if the device goes into VR mode. I'm using Samsung Galaxy S7 for testing: JS: window.addEventListener('click',…
TtT23
  • 6,876
  • 34
  • 103
  • 174
7
votes
1 answer

Limit camera positional movements to area of a specific 3D object

I am trying to limit the camera position movements to specific areas defined by a 3D object/objects children. For example, if I had a walkway object on the ocean and I only wanted my user to be able to move the camera forward and backward on that…
cnzac
  • 435
  • 3
  • 13
7
votes
1 answer

Combining A-frame with Three.js

I was wondering... Is it possible to add Three.js elements to a A-frame scene? Assuming A-frame is built upon Three.js, and three Version: ^0.74.0 is logged into your console it shouldn't be a weird thing right? I tried this code onto my A-frame…
Fabian Tjoe A On
  • 1,383
  • 5
  • 18
  • 41
7
votes
5 answers

aframe - Set camera position at runtime

In a a-scene, I try to change my camera position at runtime. The DOM property changes but the camera does not move. What could have I missed ? my js code: document.querySelector('#myCameraPosition').setAttribute('position', '0 0 0'); My a-scene: …