diff --git a/index.html b/index.html index 8cf3d7e..3b7441d 100644 --- a/index.html +++ b/index.html @@ -14,12 +14,19 @@ 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 } +var simscale = 0.035 +var forceDisplacementScale = AFRAME.utils.getUrlParameter('simscale'); +if ( forceDisplacementScale ) { + simscale = forceDisplacementScale + console.log(simsrc,"switched from default simulation scale to this one", simscale) +} +const vrHeight = 0.8 const desktopHeight = 2.5 const simext = ".jpg" const simstart = 1 const simend = 95 // mostly correct as new simulations got to 96 steps const sim_filename_padding = true -const animationSpeedStep = 500 +const animationSpeedStep = 900 var animationCurrentStep = simstart var wsimanim @@ -52,11 +59,12 @@ var positionsCurated = [ offsetWatersimPosition: "-124.32254 0.78377 -46.41836", // TODO use hotspots: [ // 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", +"-36.50124 3 18.52317", "-15.31684 3 26.46878", "-42.59553 3 32.46203", "12.26538 3 38.90027", "-0.69236 3 67.76877", "-49.01323 3 48.21272", "-79.56723 3 34.81311", "-94.0 3 25.0", "-19.2 3 60", "-86.58562 3 -5.73462", "-58.70357 3 8.36794", ], visualMarkerPositions:[ - {rotation:"0 -90 0" , position:"54.31842 -0.21946 -335.17472"}, - {rotation:"0 -90 0" , position:"46.8447 -0.21946 -291.55328"}, + // {rotation:"0 -90 0" , position:"54.31842 -0.21946 -335.17472"}, + {rotation:"0 -22.49241 0", position:"-30.15801 0.05 14.66674"}, + {rotation:"0 66.80401412327834 0" , position:"-41.94021 0.05 19.43"} ], }, { shortname: "ruelle", worldposition:[-126, -40], position:[49.3605700, 0.5031000], @@ -99,13 +107,13 @@ AFRAME.registerComponent('randomfx', { AFRAME.registerComponent('set-initial-camera-from-data', { init: function () { - this.el.setAttribute("position", positionsCurated[selection].worldposition[0] + " 1.6 " + positionsCurated[selection].worldposition[1] ) + this.el.setAttribute("position", positionsCurated[selection].worldposition[0] + " "+vrHeight+" " + positionsCurated[selection].worldposition[1] ) } }) var ignoreCache = true // should be joined as 1 or better be location dependent const disableWaysForGLTFExportInHubs = false -var selection = 2 // default position fallback to faciliate tests +var selection = 1 // default position fallback to faciliate tests // initially done as a different page at first with query parameter var forceSelection = AFRAME.utils.getUrlParameter('position'); @@ -348,6 +356,8 @@ function makeTree( treedata, el){ tree.setAttribute("position", AFRAME.utils.coordinates.stringify( pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} ) ) ) + //tree.setAttribute("rotation", "0 "+ Math.random()*360 +" 0") // changing scale ever so slightly non uniformely could be interesting too + // double check documentation, seems to move them too tree.setAttribute("instanced-mesh-member", "mesh:#meshtree") el.appendChild( tree ) } @@ -363,9 +373,8 @@ function makeBuilding( points, height, el ){ el.appendChild( building ) makeWalls( poly, height, building ) // make3DFloor( poly, building ) // not visibile so might be removed - var color = new THREE.Color( 0x8F8FFF ).offsetHSL(0,0,-Math.random()); + var color = new THREE.Color( 0x262D7B ).offsetHSL(0,0,-Math.random()); make3DRoof( poly, building, height, color ) - } function makeLine( poly, h, el ){ @@ -494,7 +503,7 @@ AFRAME.registerComponent('teleport-via-cursor', { if (!AFRAME.utils.device.checkHeadsetConnected()) cam.setAttribute("position", pos.x + " " + desktopHeight + " " + pos.z) else - cam.setAttribute("position", pos.x + " " + 1.6 + " " + pos.z) + cam.setAttribute("position", pos.x + " " + vrHeight + " " + pos.z) // might want to blink too, e.g black sphere around the camera for .5s }); this.el.addEventListener('fusing', function (evt) { @@ -516,9 +525,20 @@ AFRAME.registerComponent('hud', { ringEl.setAttribute("position", "1.5 0 -3") el.appendChild( ringEl ) var pointEl = document.createElement("a-text") - pointEl.setAttribute("value", "0.0") - pointEl.setAttribute("position", "0.3 0 -0.9") + // consider a-text instead https://github.com/lojjic/aframe-troika-text + // CEREMA/Visuals/ASSETS_3D/TypoTimer/Abel/Abel-Regular.ttf + pointEl.setAttribute("value", "0") + pointEl.setAttribute("color", "white") + pointEl.setAttribute("negate", "false") + pointEl.setAttribute("text", "align", "center") + pointEl.setAttribute("text", "font", "Visuals/Abel-Regular-msdf.json") + pointEl.setAttribute("position", "0.4 0 -0.9") el.appendChild( pointEl ) + var backgroundModelEl = document.createElement("a-gltf-model") + backgroundModelEl.setAttribute("scale", "40 50 50") + backgroundModelEl.setAttribute("position", "0.5 -0.4 -1.1") + backgroundModelEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Timer.glb") + el.appendChild( backgroundModelEl ) this.ring = ringEl this.hud = pointEl }, @@ -529,9 +549,8 @@ AFRAME.registerComponent('hud', { this.start = 0 animationTime = 0 } - this.hud.setAttribute("value", animationTime) - this.ring.setAttribute("theta-length", animationTime/20000*360) - + this.hud.setAttribute("value", animationCurrentStep) + this.ring.setAttribute("theta-length", animationCurrentStep/simend*360) } }) @@ -625,8 +644,8 @@ function playSound(){ document.querySelector("#mainbutton").style.display = "none"; } - function startExperience(){ + document.querySelector("#watersim").setAttribute("material", "displacementScale", simscale) AFRAME.scenes[0].enterVR(); playSound(); resetAnimations() @@ -662,10 +681,10 @@ function startExperience(){ material="color: orange; shader: flat"> - + - + @@ -674,7 +693,7 @@ function startExperience(){ animation__pos="property: position; from:-50 50 100; to: 50 50 100; dur: 20000; easing: linear; loop: true"> - +