I hope you are all doing well. I am new to the world of javascript and web design. I am planning to create an augmented reality for my site. At first, I used unity and wanted to get webgl output. But due to the use of vofuria engine, I understood that webgl will not be usable. That's why I went to Ar.js. But unfortunately, no matter how hard I try and follow different templates, I can't find a way. I have put the code I use here and also put all the required data publicly in AWS storage space. This information and data have been uploaded from this github itself. Thank you very much for your help and guidance
<script src="https://cdn.jsdelivr.net/gh/aframevr/[email protected]/dist/aframe-master.min.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<!-- rawgithack development URL -->
<!--<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>-->
<script src='https://s3.us-west-1.amazonaws.com/ar.js/trex-sample/aframe-ar-nft.js'></script>
<body style='margin : 0px; overflow: hidden;'>
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui='enabled: false;'
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
<!-- use rawgithack to retrieve the correct url for nft marker (see 'pinball' below) -->
<a-nft
type='nft' url='https://s3.us-west-1.amazonaws.com/ar.js/trex-sample/trex/trex-image/trex'
smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
<a-entity
gltf-model='https://s3.us-west-1.amazonaws.com/ar.js/trex-sample/trex/scene.gltf'
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>