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>