@ -1,9 +1,11 @@
< html >
< head >
< script src = "https://aframe.io/releases/1.3.0/aframe.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/gh/diarmidmackenzie/instanced-mesh@v0.6.0/src/instanced-mesh.min.js" > < / script >
< / head >
< body >
< script >
if(window.location.protocol != 'https:') { location.href = location.href.replace("http://", "https://"); }
var simsrc = "simulations/initial_simulation_data/crop_outpy_"
var forceSimulationSource = AFRAME.utils.getUrlParameter('simsrc');
@ -12,6 +14,7 @@ if ( forceSimulationSource ) {
console.log(simsrc,"switched from default simulation to this one")
// sould also update the src of id="debug_sim_cerema" with a specific step, e.g 50
}
const desktopHeight = 2.5
const simext = ".jpg"
const simstart = 1
const simend = 95 // mostly correct as new simulations got to 96 steps
@ -61,9 +64,9 @@ var positionsCurated = [
offsetWatersimPosition: "-124.32254 0.78377 -46.41836", // TODO use
hotspots: [ "-134.62038 3 -13.29107", "-125.89544 3 -30.36393", "-119.72245 3 -49.78609", "-96.91944 3 -95.00968", "-90.17903 3 -109.1628", "-142.76086 3 11.1124"],
visualMarkerPositions:[
{position:"-124.32254 0.78377 -46.41836 "},
{position:"-130.50386 0.78377 -30.91602 "},
{position:"-137.62082 0.78377 -12.86285 "},
{position:"-125.67578 0.78377 -46.72093 "},
{position:"-132.39466 0.78377 -30.06373 "},
{position:"-138.95986 0.78377 -13.43454 "},
],
},
]
@ -337,7 +340,8 @@ function makeLamp( treedata, el){
tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
) )
tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" )
//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" )
tree.setAttribute("instanced-mesh-member", "mesh:#meshlamp")
el.appendChild( tree )
}
@ -348,7 +352,8 @@ function makeTree( treedata, el){
tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
) )
tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" )
//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" )
tree.setAttribute("instanced-mesh-member", "mesh:#meshtree")
el.appendChild( tree )
}
@ -501,7 +506,10 @@ AFRAME.registerComponent('teleport-via-cursor', {
var cam = document.querySelector("#camera-rig")
this.el.addEventListener('click', function (evt) {
var pos = el.getAttribute("position")
cam.setAttribute("position", pos.x + " 1.6 " + pos.z)
if (!AFRAME.utils.device.checkHeadsetConnected())
cam.setAttribute("position", pos.x + " " + desktopHeight + " " + pos.z)
else
cam.setAttribute("position", pos.x + " " + 1.6 + " " + pos.z)
// might want to blink too, e.g black sphere around the camera for .5s
});
this.el.addEventListener('fusing', function (evt) {
@ -625,15 +633,25 @@ var animationTime = 0 // this isn't exactly aligned with animations
loadedosmways = [];
function playSound(param ){
function playSound(){
var entity = document.querySelector('[sound]');
entity.components.sound.playSound();
document.querySelector("a-entity[sound]").components.sound.playSound()
param.style.display = "none";
document.querySelector("#mainbutton").style.display = "none";
}
function startExperience(){
AFRAME.scenes[0].enterVR();
playSound();
resetAnimations()
if (!AFRAME.utils.device.checkHeadsetConnected()){
document.querySelector("#camera-rig").object3D.position.y = desktopHeight
// works only at the beginning, not after teleporting
}
}
< / script >
< button id = mainbutton style = "z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick = "playSound(this)" > Demarrer l'experience< / button >
< button id = mainbutton style = "z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick = "startExperience( )" > Demarrer l'experience< / button >
< a-scene displaymodels forcestats customdebug >
< a-entity id = "hotspots" hotspots > < / a-entity >
< a-entity id = "watervisuals" watervisuals > < / a-entity >
@ -641,17 +659,17 @@ function playSound(param){
< a-entity id = "leftHand" hand-tracking-controls = "hand: left;" > < / a-entity >
< a-entity id = "rightHand" hand-tracking-controls = "hand: right;" > < / a-entity >
< a-entity id = "camera-rig" set-initial-camera-from-data >
< a-sound autoplay = "false" loop = "true" src = "src: url(Sounds/AMBIANCES/CEREMA_AMB_VILLE.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_01.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_02.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_03.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_04.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_SIRENNES_POMPIER.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_SIRENNE_COMMUNALE.mp3)" > < / a-sound >
< a-entity position = "0 -1.2 0" sound = "src: url(Sounds/FX/CEREMA_BOUCLE_EAU.mp3); loop:true; autoplay:false; volume:0;"
animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
>< / a-entity >
< a-entity camera look-controls hud >
< a-sound autoplay = "false" loop = "true" src = "src: url(Sounds/AMBIANCES/CEREMA_AMB_VILLE.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_01.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_02.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_03.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_CRACK_MAISON_04.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_SIRENNES_POMPIER.mp3)" > < / a-sound >
< a-sound class = "randomfx" autoplay = "false" loop = "false" src = "src: url(Sounds/FX/CEREMA_SIRENNE_COMMUNALE.mp3)" > < / a-sound >
< a-entity sound = "src: url(Sounds/FX/CEREMA_BOUCLE_EAU.mp3); loop:true; autoplay:false; volume:0;"
animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
>< / a-entity >
<!-- consider time as HUD text display -->
< a-entity cursor = "fuse: true; fuseTimeout: 500"
position="0 0 -3"
@ -661,6 +679,8 @@ function playSound(param){
< / a-entity >
< a-gltf-model resetanimations = "" position = "6 6 9" scale = "100 100 100" rotation = "29 -160 -10" gltf-model = "Visuals/ASSETS_3D/AA_Reset.glb" opacity = "1" > < / a-gltf-model >
< / a-entity >
< a-entity id = "meshlamp" gltf-model = "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" instanced-mesh > < / a-entity >
< a-entity id = "meshtree" gltf-model = "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" instanced-mesh > < / a-entity >
< a-plane id = "ground" visible = false position = "0 -.5 0" rotation = "-90 0 0" width = "1000" height = "1000" color = "lightgrey" > < / a-plane >
< a-entity light = "type: ambient; color: #BBB" > < / a-entity >
@ -672,10 +692,10 @@ function playSound(param){
< a-entity position = "-70 0 -42" osm id = "osm" > < / a-entity >
<!-- offset on test data for easier vr testing -->
< a-gltf-model class = "models_ruelle" visible = "" position = "-140.71021 0.73 -28.54369 " scale = "1.2 1.2 1.2" rotation = "0 -111.8545396388247 0" gltf-model = "Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways = "" > < / a-gltf-model >
< a-gltf-model class = "models_ruelle" visible = "" position = "-139.95628 0.73 -34.3154 " scale = "1.2 1.2 1.2" rotation = "0 -111.8545396388247 0" gltf-model = "Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways = "" > < / a-gltf-model >
< a-gltf-model class = "models_baquets" visible = "" position = "33.17554 -1.33294 -293.0568" scale = "1.2 1.2 1.2" rotation = "0 170.2355012158848 0" gltf-model = "Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb" listosmways = "" > < / a-gltf-model >
< a-plane id = "landscape" position = "0 -12.5 0" scale = "10 10 10" rotation = "-90 0 -90" width = "100" height = "100" geometry = "segmentsHeight: 128; segmentsWidth: 128"
material="src: ign_terrain_cached.jpg; displacementScale: 2 0; displacementMap: ign_elevation_cached.jpg;">< / a-plane >
material="src: ign_terrain_cached.jpg; displacementScale: 1 0; displacementMap: ign_elevation_cached.jpg;">< / a-plane >
< a-plane id = "watersim" cerema = "" position = "0 -51.55 0" rotation = "-90 90 0" src = "Visuals/EAU/Eau_01.jpg"
material="displacementScale: 0.04; wireframe: false; displacementMap: "