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:
We can set 3D objects in GLTF 2.0 format (as a single file, or GLB format) using the gltf-model component. Since GLTF file may be large, it is convenient to use a a-assets element to enclose the assets (in this case, the GLB file).
There are many sources for GLTF objects. For example:
- Sketchfab. Many objects to download. Some of them are free, and can be reused, some are not.
- Polycam. Produce a GLTF from an object, using the camera of your mobile phone. Download the app, record the object with the camera from all angles, download the result as GLTF.
GLTF objects may have movements. Those can be animated with the animation-mixer component,
from aframe-extras, which we already used to have the movement-controls component.
Let's work with Mech Drone, by Willy Decarpentrie (license CC-by). To download it, you will need to create an account in Sketchfab for you, and login.
By default, animation-mixer will run all the animations of the object
(in this case only one, which shows the arms of the drone moving):
<a-entity gltf-model="#drone" position="-1 0.6 -3"
scale="2 2 2" animation-mixer>
</a-entity>