<!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://aframe.io/releases/0.5.0/aframe.min.js"></script>
<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 () => {
// うまくいかない
// "Uncaught (in promise) TypeError: undefined has no properties"
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
const 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_spec = characters[0];
// htmlShader: https://qiita.com/shima-07/items/262ce43c4b880aec1dba
// createContextual...: https://qiita.com/dsudo/items/58718e9e3c870e6b92e6#%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0
const sampleGod_entity = document.createRange().createContextualFragment(
`<a-entity><a-plane id='sampleGod-entity' width='50' height='50' material='shader: html; target: #sampleGod-img;' gps-entity-place='latitude: ${sampleGod_spec.location.latitude}; longitude: ${sampleGod_spec.location.longitude};' ></a-plane></a-entity>`
);
a_scene.appendChild(sampleGod_entity);
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>
</div>
</body>
</html>
