The below example shows using A-Frame together with ARjs to show a basic 3D model of a rocket.
Please notice, that it is necessary to add a link to a JavaScript library containing the ARjs component.
The example uses a standard marker called “Hiro”.
Please use Firefox as browser, when you test it (also on your phone).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title>ARjs with basic 3D</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> ); </head> <!-- include ar.js for A-Frame --> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs> <!-- create your content here. just a box for now --> <a-obj-model src="model.obj" mtl="materials.mtl" position="0 0.5 0" scale="0.3 0.3 0.3" /> <!-- define a camera which will move according to the marker position --> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> </body> </html> |