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

updated hotspots and added visual markers

Browse Source
master
Fabien Benetou 2 years ago
parent eeff456d80
commit 7a16e43fb6
1 changed files with 38 additions and 26 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. 64
      index.html

64
index.html
Unescape View File

@ -42,27 +42,25 @@ var currentGeoPose = null; // https://developer.mozilla.org/en-US/docs/Web/API/G
// otherwise have 2 fallbacks via menu // otherwise have 2 fallbacks via menu
var positionsCurated = [ var positionsCurated = [
// [50.8354400, 4.3582900],
{ position:[50.8365354, 4.3581719], hotspots: []}, { position:[50.8365354, 4.3581719], hotspots: []},
{ shortname: "baquets", worldposition:[83.03582, -346.4272], position:[49.3516400, 0.5461600], { shortname: "baquets", worldposition:[83.03582, -346.4272], position:[49.3516400, 0.5461600], // way heavier!
hotspots: [ hotspots: [
// done via the AFrame inspector then pasting here, then regex // done via the AFrame inspector then pasting here, then regex
[-126.65372, -0.46424], [-126.65372, -0.46424], [-126.29815, -26.94149], [-125.92851, -42.42632], [-122.30186, -52.18768], [-105.27281, -51.22971], [-104.02136, -36.467], [-102.82045, -18.61413], [-102.20349, -3.76295], [-118.85539, 2.56914], "43.48623 3 -288.74555", "68.57429 3 -282.87103", "46.02284 3 -305.55214", "49.22355 3 -327.33712", "52.05644 3 -340.62478", "77.24641 3 -340.95731", "78.9282 3 -321.94687", "76.38192 3 -304.13508", "73.59993999999999 3 -290.19813", "56.94803999999999 3 -283.86604",
],
visualMarkerPositions:[
{rotation:"0 -90 0" , position:"54.31842 -0.21946 -335.17472"},
{rotation:"0 -90 0" , position:"46.8447 -0.21946 -291.55328"},
], ],
hotspotoffsetPosition: new THREE.Vector3(175.80343,0,-286.43518),
//hotspotoffsetRotation: "0 8.047765190407544 0"
}, },
{ shortname: "ruelle", worldposition:[-126, -40], position:[49.3605700, 0.5031000], { shortname: "ruelle", worldposition:[-126, -40], position:[49.3605700, 0.5031000],
hotspots: [ 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",
[-134.62038, -13.29107], [-125.89544, -30.36393], [-119.72245, -49.78609], [-96.91944, -95.00968], [-90.17903, -109.1628], visualMarkerPositions:[
, [-142.76086, 11.1124] {position:"-124.32254 0.78377 -46.41836"},
{position:"-130.50386 0.78377 -30.91602"},
{position:"-137.62082 0.78377 -12.86285"},
], ],
hotspotoffsetPosition: new THREE.Vector3(),
//hotspotoffsetPosition: "0 0 0",
//hotspotoffsetRotation: "0 0 0",
}, },
{ position:[50.8440239, 4.3952614], hotspots: []}, // brussels for tests
] ]
var textureOffsetStart = 0 var textureOffsetStart = 0
@ -106,7 +104,8 @@ var forceSelection = AFRAME.utils.getUrlParameter('position');
if ( forceSelection ) selection = forceSelection if ( forceSelection ) selection = forceSelection
var position = positionsCurated[selection].position var position = positionsCurated[selection].position
var hotspots = positionsCurated[selection].hotspots.map( i => [ i[0]+positionsCurated[selection].hotspotoffsetPosition.x ,i[1]+positionsCurated[selection].hotspotoffsetPosition.z ] ) var hotspots = positionsCurated[selection].hotspots
var visualmarkers = positionsCurated[selection].visualMarkerPositions
var precision = 4 var precision = 4
var bbox_limit = 10/10**precision var bbox_limit = 10/10**precision
@ -439,19 +438,32 @@ AFRAME.registerComponent('cerema', {
} }
}) })
AFRAME.registerComponent('watervisuals', {
init: function () {
var el = this.el
visualmarkers.map( h => {
var pointEl = document.createElement("a-gltf-model")
pointEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Crue.glb")
pointEl.setAttribute("scale", "60 60 60")
pointEl.setAttribute("rotation", "0 70 0")
pointEl.setAttribute("position", h.position)
if (h.rotation) pointEl.setAttribute("rotation", h.rotation)
el.appendChild( pointEl )
})
}
})
AFRAME.registerComponent('hotspots', { AFRAME.registerComponent('hotspots', {
init: function () { init: function () {
var el = this.el var el = this.el
hotspots.map( h => { hotspots.map( h => {
//var pointEl = document.createElement("a-sphere")
//pointEl.setAttribute("geometry", "segmentsHeight: 4; segmentsWidth: 8")
var pointEl = document.createElement("a-gltf-model") var pointEl = document.createElement("a-gltf-model")
pointEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Hotspot.glb") pointEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Hotspot.glb")
//pointEl.setAttribute("opacity", .3)
pointEl.setAttribute("model-opacity", .3) pointEl.setAttribute("model-opacity", .3)
pointEl.setAttribute("scale", "50 50 50") pointEl.setAttribute("scale", "50 50 50")
pointEl.setAttribute("position", h[0] + " 3 " + h[1])
pointEl.setAttribute("teleport-via-cursor", true) pointEl.setAttribute("teleport-via-cursor", true)
pointEl.setAttribute("position", h)
el.appendChild( pointEl ) el.appendChild( pointEl )
}) })
@ -617,8 +629,9 @@ function playSound(param){
} }
</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="playSound(this)">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>
<!-- Quest available only during event, otherwise cardboard --> <!-- Quest available only during event, otherwise cardboard -->
<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>
@ -642,10 +655,9 @@ function playSound(param){
</a-entity> </a-entity>
</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-gltf-model position="-2.2864 1.02726 -1.41235" scale="30 30 30" rotation="0 70 0" gltf-model="Visuals/ASSETS_3D/AA_Crue.glb" opacity="1"></a-gltf-model>
</a-entity> </a-entity>
<a-plane id="ground" position="0 -.2 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>
<a-entity id="sun" light="type: directional; color: #FFF; castShadow:true;" position="-5 5 0" <a-entity id="sun" light="type: directional; color: #FFF; castShadow:true;" position="-5 5 0"
animation="property: light.intensity; from:0.1; to: 0.6; dur: 20000; easing: linear; loop: true; dir:alternate;" animation="property: light.intensity; from:0.1; to: 0.6; dur: 20000; easing: linear; loop: true; dir:alternate;"
@ -656,12 +668,12 @@ function playSound(param){
<!-- 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="-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_baquets" visible="" position="95.71286 -1.33294 -307.27021" scale="1.2 1.2 1.2" rotation="0 179.42402537639782 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 -20 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: 20; displacementMap: ign_elevation_cached.jpg;"></a-plane>
<a-plane id="watersim" cerema="" position="0 -50.25 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg" <a-plane id="watersim" cerema="" position="0 -52.25 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg"
material="displacementScale: 0.02; wireframe: false; displacementMap: " material="displacementScale: 0.03; wireframe: false; displacementMap: "
geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane> geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane>
<!-- animation might fail due texture.neddUpdate unset --> <!-- animation might fail due texture.neddUpdate unset -->

Write Preview
Loading…
Cancel
Save