Experience results from numerical simulations by the CEREMA in 2 locations in France. Build on OpenStreetMap, IGN data and AFrame for WebXR support.
https://bric-vr.com/cerema/portail/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
3 years ago
|
<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>
|