idea

3 years ago · b3d66ba598
commit b3d66ba598
1 changed files with 46 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,46 @@
 <html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
 <script>
 var currentGeoPose = null; // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
 Geolocation.getCurrentPosition( console.log )
 // otherwise have 2 fallbacks via menu
 var positionsCurated = [{0,0},{1,1}]
 // default position fallback to faciliate tests
 var position = positionsCurated[0]
 // initially done as a different page at first with query parameter
 var forcePosition = AFRAME.utils.getUrlParameter('position');
 if ( forcePosition ) position = positionsCurated[forcePosition]
 // generate 3D model from the target location from OSM data
 // fetch flood data of target location (should be only 2 available) as timeseries
 // animate water based on flood data
 // allow viewer to control the animation e.g restart, pause, change time
 // modify environment to reflect time of day
 AFRAME.registerComponent('pinchtest', { // currently only 1 hand, the right one
  init: function () {
  }
 });
 </script>
    <a-scene >
      <a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
      <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
      <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>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
 </html>