updated hotspots and added visual markers

master
Fabien Benetou 2 years ago
parent eeff456d80
commit 7a16e43fb6
  1. 60
      index.html

@ -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 )
}) })
@ -619,6 +631,7 @@ function playSound(param){
<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 -->

Loading…
Cancel
Save