From 7a16e43fb625e315555770cf19ea3fb6e3e8db50 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Mon, 21 Nov 2022 21:16:19 +0100
Subject: [PATCH] updated hotspots and added visual markers

---
 index.html | 64 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 08c1592..a6322d4 100644
--- a/index.html
+++ b/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
 var positionsCurated = [
-//		[50.8354400, 4.3582900],
 		{ 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: [
-			// 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], 
-
+				// done via the AFrame inspector then pasting here, then regex
+				"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], 
-			hotspots: [ 
-				[-134.62038, -13.29107], [-125.89544, -30.36393], [-119.72245, -49.78609], [-96.91944, -95.00968], [-90.17903, -109.1628],
-, [-142.76086, 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:[ 
+				{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
@@ -106,7 +104,8 @@ var forceSelection = AFRAME.utils.getUrlParameter('position');
 if ( forceSelection ) selection = forceSelection
 
 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 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', {
   init: function () {
 	var el = this.el
 	hotspots.map( h => {
-		//var pointEl = document.createElement("a-sphere")
-		//pointEl.setAttribute("geometry", "segmentsHeight: 4; segmentsWidth: 8")
 		var pointEl = document.createElement("a-gltf-model")
 		pointEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Hotspot.glb")
-		//pointEl.setAttribute("opacity", .3)
 		pointEl.setAttribute("model-opacity", .3)
 		pointEl.setAttribute("scale", "50 50 50")
-		pointEl.setAttribute("position", h[0] + " 3 " + h[1])
 		pointEl.setAttribute("teleport-via-cursor", true)
+		pointEl.setAttribute("position", h)
 		el.appendChild( pointEl )
 	})
 
@@ -617,8 +629,9 @@ function playSound(param){
 }
 </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> 
-    <a-scene displaymodels forcestats customdebug>
+    <a-scene displaymodels forcestats customdebug >
 	<a-entity id="hotspots" hotspots ></a-entity>
+	<a-entity id="watervisuals" watervisuals ></a-entity>
       <!-- Quest available only during event, otherwise cardboard -->
       <a-entity id="leftHand" hand-tracking-controls="hand: left;"></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-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-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 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;"
@@ -656,12 +668,12 @@ function playSound(param){
 
 	<!-- 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_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-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-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: 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"
-		material="displacementScale: 0.02; wireframe: false; displacementMap: "
+	<a-plane id="watersim" cerema="" position="0 -52.25 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg"
+		material="displacementScale: 0.03; wireframe: false; displacementMap: "
 		geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane>
 			<!-- animation might fail due texture.neddUpdate unset -->