<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script> <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script> <!-- https://qiita.com/shima-07/items/262ce43c4b880aec1dba htmlをマテリアルとして貼れる --> <script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script> <script src="js/html2canvas.min.js"></script> <!-- aframe-gif-shader ref: https://hatsumeihakken.com/aframegifshader/--> <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script> <script> 'use strict'; async function get_current_location() { // とりあえず let location; await new Promise((resolve) => { navigator.geolocation.getCurrentPosition((position) => { location = { latitude: position.coords.latitude, longitude: position.coords.longitude } }, (error) => { console.error(error); alert('ここはどこなんだー!!\n居場所がわからんぞ…位置情報を有効にして再読込してくれーい!'); }); resolve(); }); console.log(location); return location; } window.onload = async () => { let {latitude,longitude} = await get_current_location(); console.log(latitude,longitude); // object, button: https://medium.com/swlh/build-your-location-based-augmented-reality-web-app-a841956eed2c let characters = [ { name: 'sampleGod', location: { latitude, longitude }, id: 'sampleGod-entity', src: { // init デフォルト 必須, 他 任意指定 init: 'sampleGod_stay.gif', action: 'sampleGod_newAnimation.gif' } } ]; let a_scene = document.querySelector('a-scene'); let sampleGod = document.createElement('a-image'); sampleGod.setAttribute('id' , 'sampleGod-entity'); sampleGod.setAttribute('src', 'sampleGod_stay.gif'); sampleGod.setAttribute('gps-entity-place-dummy', `latitude: ${characters[0].location.latitude}; longitude: ${characters[0].location.longitude};`); a_scene.appendChild(sampleGod); const sampleGod_entity = document.querySelector('#sampleGod-entity'); document.querySelector('#set-entity-place').addEventListener('click', () => sampleGod_entity.setAttribute('gps-entity-place', `latitude: ${characters[0].location.latitude}; longitude: ${characters[0].location.longitude};`)); document.querySelector('#sampleGod-show-hide').addEventListener('click', ()=>{console.log('がんばる')}); document.querySelector('#sampleGod-toggle-animation').addEventListener('click', ()=>{console.log('なんとかする')}); // まずgifをどうにか }; </script> <link href='style.css' rel='stylesheet' type='text/css' media='all'> </head> <body style="margin: 0; overflow: hidden;"> <div id='sampleGod-img'> <img src='sampleGod_stay.gif'> </div> <a-scene vr-mode-ui='enabled: false' embedded arjs='sourceType: webcam; debugUIEnables: false;'> <a-camera gps-camera rotation-reader></a-camera> <!-- characters may written here --> </a-scene> <div class="UI"> <button id="sampleGod-show-hide" > hide </button> <button id="sampleGod-toggle-animation"> animation toggle</button> <button id='set-entity-place' > set current location </button> </div> </body> </html>