Argon-aframe is built on top of the A-Frame framework and allows you to make use of much of the existing A-Frame code. We will not go through A-Frame itself. For an explanation of the A-Frame entities, please consult the A-Frame documentation. Instead, we will start by showing you how easy it is to “wrap” Argon-aframe around A-Frame itself.
Here is the code for the Hello World example in A-Frame itself:
This A-Frame example creates an
<a-scene> in the body of the html page. Inside the
<a-scene> there are four 3D entities: a sphere, a box, a cylinder, and a plane. (There is also a color for the sky and a positioning of the 3D camera. But for the Argon version, we don’t need the sky because Argon will use the device’s own videocamera to provide the physical world as the background. Also, we don’t need to specify the 3D camera for this example.) You can view this example in a conventional browser such as Safari or Chrome.
For the Argon version, we replace the
<a-scene> tag with the
<ar-scene> tag. Then we group the 3D entities under another
<a-entity> with the id “helloworld” and a position.
Here is the code:
In addition, you see in the
<script> tags above to work.