nicolocarpignoli
commented
4 years ago Location Based Templates:
3D Objects:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
renderer="logarithmicDepthBuffer: true;"
embedded
loading-screen="enabled: false;"
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-assets>
<a-asset-item id="animated-asset" src="<path-to-gltf>"> </a-asset-item>
</a-assets>
<a-entity look-at="[gps-camera]" animation-mixer="loop: repeat" gltf-model="#animated-asset" gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;">
</a-entity>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>2D images:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
embedded
loading-screen="enabled: false;"
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-image src="<path-to-image>" look-at="[gps-camera]" gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;">
</a-image>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>Audios:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
embedded
loading-screen="enabled: false;"
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-assets>
<a-asset-item
id="sound"
src="<source-mp3>"
response-type="arraybuffer"
></a-asset-item>
</a-assets>
<a-entity
look-at="[gps-camera]"
id="sound-entity"
sound="src: #sound"
emitsevent
autoplay="false"
gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
></a-entity>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>Videos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
embedded
loading-screen="enabled: false;"
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-assets>
<video src="<video-url>" preload="auto" id="vid" response-type="arraybuffer" loop
crossorigin webkit-playsinline autoplay muted playsinline>
</video>
</a-assets>
<a-video
src="#vid"
position='0 0.1 0'
rotation="-90 0 0"
look-at="[gps-camera]"
videohandler
smooth="true"
smoothCount="10"
smoothTolerance="0.01"
smoothThreshold="5"
autoplay="false"
gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
>
</a-video>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>@le0m here you go mate
We need HTML templates for generating Location-based application.