utopiah
/
CEREMA
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

instancing, moved sound to rig, http to https

Browse Source
master
Fabien Benetou 2 years ago
parent 68599638ab
commit 35ec84ca2a
2 changed files with 42 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 46
      index.html
  2. 1
      portail.html

46
index.html
Unescape View File

@ -1,9 +1,11 @@
<html> <html>
<head> <head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <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> </head>
<body> <body>
<script> <script>
if(window.location.protocol != 'https:') { location.href = location.href.replace("http://", "https://"); }
var simsrc = "simulations/initial_simulation_data/crop_outpy_" var simsrc = "simulations/initial_simulation_data/crop_outpy_"
var forceSimulationSource = AFRAME.utils.getUrlParameter('simsrc'); var forceSimulationSource = AFRAME.utils.getUrlParameter('simsrc');
@ -12,6 +14,7 @@ if ( forceSimulationSource ) {
console.log(simsrc,"switched from default simulation to this one") 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 // 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 simext = ".jpg"
const simstart = 1 const simstart = 1
const simend = 95 // mostly correct as new simulations got to 96 steps 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 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"], 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:[ visualMarkerPositions:[
{position:"-124.32254 0.78377 -46.41836"}, {position:"-125.67578 0.78377 -46.72093"},
{position:"-130.50386 0.78377 -30.91602"}, {position:"-132.39466 0.78377 -30.06373"},
{position:"-137.62082 0.78377 -12.86285"}, {position:"-138.95986 0.78377 -13.43454"},
], ],
}, },
] ]
@ -337,7 +340,8 @@ function makeLamp( treedata, el){
tree.setAttribute("position", AFRAME.utils.coordinates.stringify( tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} ) 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 ) el.appendChild( tree )
} }
@ -348,7 +352,8 @@ function makeTree( treedata, el){
tree.setAttribute("position", AFRAME.utils.coordinates.stringify( tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} ) 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 ) el.appendChild( tree )
} }
@ -501,7 +506,10 @@ AFRAME.registerComponent('teleport-via-cursor', {
var cam = document.querySelector("#camera-rig") var cam = document.querySelector("#camera-rig")
this.el.addEventListener('click', function (evt) { this.el.addEventListener('click', function (evt) {
var pos = el.getAttribute("position") 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 // might want to blink too, e.g black sphere around the camera for .5s
}); });
this.el.addEventListener('fusing', function (evt) { this.el.addEventListener('fusing', function (evt) {
@ -625,15 +633,25 @@ var animationTime = 0 // this isn't exactly aligned with animations
loadedosmways = []; loadedosmways = [];
function playSound(param){ function playSound(){
var entity = document.querySelector('[sound]'); var entity = document.querySelector('[sound]');
entity.components.sound.playSound(); entity.components.sound.playSound();
document.querySelector("a-entity[sound]").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() resetAnimations()
if (!AFRAME.utils.device.checkHeadsetConnected()){
document.querySelector("#camera-rig").object3D.position.y = desktopHeight
// works only at the beginning, not after teleporting
}
} }
</script> </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-scene displaymodels forcestats customdebug >
<a-entity id="hotspots" hotspots ></a-entity> <a-entity id="hotspots" hotspots ></a-entity>
<a-entity id="watervisuals" watervisuals ></a-entity> <a-entity id="watervisuals" watervisuals ></a-entity>
@ -641,7 +659,6 @@ function playSound(param){
<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity> <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="rightHand" hand-tracking-controls="hand: right;"></a-entity>
<a-entity id="camera-rig" set-initial-camera-from-data> <a-entity id="camera-rig" set-initial-camera-from-data>
<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 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_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_02.mp3)"></a-sound>
@ -649,9 +666,10 @@ function playSound(param){
<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_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_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-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;" <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;" animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
></a-entity> ></a-entity>
<a-entity camera look-controls hud>
<!-- consider time as HUD text display--> <!-- consider time as HUD text display-->
<a-entity cursor="fuse: true; fuseTimeout: 500" <a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -3" position="0 0 -3"
@ -661,6 +679,8 @@ function playSound(param){
</a-entity> </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-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>
<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-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> <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> <a-entity position="-70 0 -42" osm id="osm"></a-entity>
<!-- offset on test data for easier vr testing --> <!-- 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-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" <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: 20; displacementMap: ign_elevation_cached.jpg;"></a-plane> material="src: ign_terrain_cached.jpg; displacementScale: 10; 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" <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: " material="displacementScale: 0.04; wireframe: false; displacementMap: "

1
portail.html
Unescape View File

@ -45,6 +45,7 @@
</ul> </ul>
<h2>Documentation</h2> <h2>Documentation</h2>
Utiliser <a href="https://www.oculus.com/open_url/?url=https://fabien.benetou.fr/pub/home/CEREMA/">ouvrir via Quest app</a>.<br/>
Utiliser <a href="https://hmd.link">hmd.link</a> dans le navigateur Web du casque pour partager le lien genere ou <a href="https://fabien.benetou.fr/pub/home/CEREMA/portail.html">ce portail</a>. Utiliser <a href="https://hmd.link">hmd.link</a> dans le navigateur Web du casque pour partager le lien genere ou <a href="https://fabien.benetou.fr/pub/home/CEREMA/portail.html">ce portail</a>.
<h2>Code</h2> <h2>Code</h2>
Disponible en open-source a <a href="https://git.benetou.fr/utopiah/CEREMA/">https://git.benetou.fr/utopiah/CEREMA/</a> Disponible en open-source a <a href="https://git.benetou.fr/utopiah/CEREMA/">https://git.benetou.fr/utopiah/CEREMA/</a>

Write Preview
Loading…
Cancel
Save