A playground for learning about A-frame
This session will enter into some details of how to use A-Frame with only HTML.
When we use devices such as Quest 2 or Quest 3, we can try our scenes in augmented reality. For that, we need to add a component to the scene (to a-scene), that let’s us select AR in devices in which it is available. This component is xr-mode-ui="XRMode: xr". We can also use the hide-on-enter-ar component for entities that should not appear in AR (such as sky, for example, which would hide the reality).
See the complete scene, based on the basic example:
We can also make the AR scene more real:
Instead of controllers, we can also use our hands. In this scene, we can see how the Quest can model our hands in augmented reality, following the gestures we do with them:
And once we can track hands gestures, we can use them to interact with the scene. For example, check out this demo of grabbing objects with our hands:
Each entity in HTML can fire events, in response, for example, to user interaction. The same happens when we’re using A-Frame. For showing the basics of how they work, let’s use the animation component. This component allows for simple animations of properties of the components, such as for example, their size:
<a-box position="-3 0.5 -4" rotation="0 60 0" color="green"
animation="property: position;
to: -2 0.5 -4; dur: 1000; loop: true; dir: alternate;">
</a-box>
We can fire animations based on events on the entity in which they are. For example:
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
animation="startEvents: click; property: position;
from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000">
</a-box>
For producing events on the box, we need something that interacts with it. In desktop, this can be the mouse. For making it work, we can use a cursor component, which will be driven by the mouse: when right cliking the mouse, the click event will be fired on the entity under the cursor. The cursor can be defined anywhere in the scene:
<a-entity cursor="rayOrigin:mouse"></a-entity>
See a complete scene in which you can use the mouse to trigger different events, which will change the aspect of the entities in it:
When in VR, the cursor can be a pointer, controlled with the controller. For that, we have a component, laser-controls, which draws a kind of a laser line in the scene, which can point to the entities in which we can fire the events. The click event is triggered by pressing the fire button in the controller. See an example combining a mouse-controlled cursor for desktop, and a controller-controlled laser for VR devices: