|
|
|
|
@ -5,9 +5,14 @@ |
|
|
|
|
<body> |
|
|
|
|
<script> |
|
|
|
|
var currentGeoPose = null; // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition |
|
|
|
|
Geolocation.getCurrentPosition( console.log ) |
|
|
|
|
navigator.geolocation.getCurrentPosition( geolocalized ) // should handle error, including being ignored |
|
|
|
|
// otherwise have 2 fallbacks via menu |
|
|
|
|
var positionsCurated = [{0,0},{1,1}] |
|
|
|
|
var positionsCurated = [ |
|
|
|
|
[50.8440239,4.3952614], // brussels for tests |
|
|
|
|
[1,1] |
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
// should get in turn nwr(50.844,4.395,50.845,4.396); as example of scale |
|
|
|
|
|
|
|
|
|
// default position fallback to faciliate tests |
|
|
|
|
var position = positionsCurated[0] |
|
|
|
|
@ -17,8 +22,20 @@ var forcePosition = AFRAME.utils.getUrlParameter('position'); |
|
|
|
|
if ( forcePosition ) position = positionsCurated[forcePosition] |
|
|
|
|
|
|
|
|
|
// generate 3D model from the target location from OSM data |
|
|
|
|
var bbox = "" + position[0] |
|
|
|
|
+ "," + position[1] |
|
|
|
|
+ "," + (position[0]+0.001) |
|
|
|
|
+ "," + (position[1]+0.001) |
|
|
|
|
var queryOSM = `https://overpass-api.de/api/interpreter?data=[out:json];nwr(${bbox});out;` |
|
|
|
|
console.log( bbox ) |
|
|
|
|
// format https://overpass-api.de/output_formats.html#json |
|
|
|
|
// bounding box https://dev.overpass-api.de/overpass-doc/en/full_data/bbox.html |
|
|
|
|
// testing https://overpass-turbo.eu |
|
|
|
|
fetch(queryOSM).then(response => response.json()).then(data => fromOSMTo3DElements(data) ) |
|
|
|
|
|
|
|
|
|
// fetch flood data of target location (should be only 2 available) as timeseries |
|
|
|
|
var queryCEREMA = "https://cerema.fr/api/"+position |
|
|
|
|
fetch(queryCEREMA).then(response => response.json()).then(data => console.log(data) ) |
|
|
|
|
|
|
|
|
|
// animate water based on flood data |
|
|
|
|
|
|
|
|
|
@ -26,16 +43,47 @@ if ( forcePosition ) position = positionsCurated[forcePosition] |
|
|
|
|
|
|
|
|
|
// modify environment to reflect time of day |
|
|
|
|
|
|
|
|
|
AFRAME.registerComponent('pinchtest', { // currently only 1 hand, the right one |
|
|
|
|
AFRAME.registerComponent('osm', { // currently only 1 hand, the right one |
|
|
|
|
init: function () { |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var globaljosm |
|
|
|
|
|
|
|
|
|
function fromOSMTo3DElements( josm ){ |
|
|
|
|
globaljosm = josm |
|
|
|
|
var ways = josm.elements.filter( e => (e.type == "way") ) |
|
|
|
|
var houses = josm.elements.filter( e => (e.type == "node" && e.tags && e.tags["addr:housenumber"])) |
|
|
|
|
// does not give a polygon, might need further requests. Might also not be the right way. |
|
|
|
|
addHouses( houses ) |
|
|
|
|
console.log( ways.length, houses.length ) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function addHouses( houses ){ |
|
|
|
|
houses.map( h => { |
|
|
|
|
var el = document.createElement("a-box") |
|
|
|
|
el.setAttribute("position", |
|
|
|
|
(((h.lat*1000)-(Math.round(h.lat*1000)))*10).toFixed(3) |
|
|
|
|
+ " 0 " |
|
|
|
|
+ (((h.lon*1000)-(Math.round(h.lon*1000)))*10).toFixed(3) |
|
|
|
|
) |
|
|
|
|
AFRAME.scenes[0].appendChild( el ) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function geolocalized( pos ){ |
|
|
|
|
console.log( pos.coords ) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
<a-scene > |
|
|
|
|
<a-scene osm> |
|
|
|
|
<!-- Quest available only during event, otherwise cardboard --> |
|
|
|
|
<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity> |
|
|
|
|
<a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity> |
|
|
|
|
<!-- for cardboard consider instead https://aframe.io/docs/1.3.0/components/cursor.html --> |
|
|
|
|
|
|
|
|
|
<a-sound src="src: url(birds.mp3)" autoplay="true" position="0 2 5"></a-sound> |
|
|
|
|
<a-sound src="src: url(river.mp3)" autoplay="true" position="0 2 5"></a-sound> |
|
|
|
|
<a-box position="-0.1 1.2 -0.3" scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9"></a-box> |
|
|
|
|
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> |
|
|
|
|
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> |
|
|
|
|
|
