The below example shows using A-Frame together with ARjs to show an Urban Power 3D model (Havnegade in Næstved).
Please notice, that it is necessary to add a link to a JavaScript library containing the ARjs component.
The example should use a custom marker, but this doesn’t work!!! So just use a printout of one of the preset markers, when you test it.
Please use Firefox as browser, when you test it (also on your phone).
The model is not correctly positioned/rotated, so you must do that to make it show nicely. As the model is quite big, it can be necessary to step a bit back from the marker to show the model!!!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>ARjs with Urban Power model</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='sourceType: webcam;'> <a-assets> <a-asset-item id="havnegade" src="20180124_havnegade.gltf"> </a-asset-item> </a-assets> <!-- use your gltf model --> <a-entity gltf-model="#havnegade" position="0 0.5 0" rotation="0 -180 0" scale="0.01 0.01 0.01"></a-entity> <!-- define a camera which will move according to the marker position --> <a-marker-camera preset='custom' patternUrl='pattern-marker.patt'> </a-marker-camera> </a-scene> </body> </html> |