<!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';
function get_current_location() { // とりあえず
let location;
navigator.geolocation.getCurrentPosition((position) => {
location = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
}
},
(error) => {
console.error(error);
alert('ここはどこなんだー!!\n居場所がわからんぞ…位置情報を有効にして再読込してくれーい!');
});
console.log(location);
return location;
}
/*
console.log(`location found; lat: ${lat}, lng: ${lng}`);
console.log(a_object);
a_object.setAttribute("gps-entity-place", `latitude: ${lat}; longitude: ${lng};`); // https://qiita.com/dsudo/items/58718e9e3c870e6b92e6#%EF%BC%93%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%83%86%E3%82%A3%E3%81%AE%E5%8B%95%E7%9A%84%E8%BF%BD%E5%8A%A0
// https://medium.com/swlh/build-your-location-based-augmented-reality-web-app-a841956eed2c
console.log(a_object);
});
}*/
let {latitude,longitude} = get_current_location();
console.log(latitude,longitude);
let characters = [
{
name: 'sampleGod',
location: {
latitude: latitude,
longitude: longitude
},
id: 'sampleGod-entity',
src: { // init デフォルト 必須, 他 任意指定
init: 'sampleGod_stay.gif',
action: 'sampleGod_newAnimation.gif'
}
}
];
window.onload = () => {
let a_scene = document.querySelector('a-scene');
let sampleGod_spec = characters[0];
const sampleGod_img = docuemnt.createElement('img');
sampleGod_img.setAttribute('id', 'sampleGod-img');
sampleGod_img.setAttribute('src', sampleGod_spec.src.init);
document.body.appendChild(sampleGod_img);
const sampleGod_entity = document.createRange().createContextualFragment(
`<a-entity id='sampleGod-entity' geometry='primitive: plane;' scale='10 10 10' material='shader: gif; src: sampleGod_stay.gif' gps-entity-place='latitude: ${sampleGod_spec.location.latitude}; longitude: ${sampleGod_spec.location.longitude};' ></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;">
<!-- <img id='sampleGod-stay' src='sampleGod_stay.gif'>
<img id='sampleGod-action' src='sampleGod_newAnimation.gif'>
-->
<a-scene vr-mode-ui='enabled: false' embedded arjs='sourceType: webcam; debugUIEnables: false;'>
<!--
<a-entity id='sampleGod-entity' material='shader: gif; src: sampleGod_stay.gif' gps-entity-place='latitude: __; longitude: __;'>
</a-entity>
<a-plane gps-entity-place='latitude: __; longitude: __;'></a-plane> -->
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
<div class="UI">
<button id="sampleGod-show-hide" > hide </button>
<button id="sampleGod-toggle-animation"> animation toggle</button>
</div>
</body>
</html>
