From 21820bc2f2b59efe078879adb203811a388c2336 Mon Sep 17 00:00:00 2001 From: Kieran Farr <kieran.farr@gmail.com> Date: Fri, 7 Jun 2024 13:53:10 -0700 Subject: [PATCH 1/3] wip transfer from glitch --- index.html | 146 +++++++++++++++++++++++++++++++++++++++++- src/viewer-styles.css | 28 ++++++++ 2 files changed, 173 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 094e5fef1..53091caa3 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,48 @@ </button> </div> + <!-- viewer AR mode start --> + <div id="ar-overlay" draggable="false" style="visibility: hidden"> + <span id="greeting">3DStreet AR Viewer</span> + <button id="exit-ar">EXIT AR MODE</button> + <span style="display: block"> + <p>Absolute Compass: <span id="compass">x</span></p> + <span>Compass Updates</span> + <button id="pause" onclick="window.pauseCompass = true;"> + STOP + </button> + <button id="unpause" onclick="window.pauseCompass = false;"> + START + </button> + </span> + <span style="display: block"> + <span>Scene Y Rotation</span> + <button id="decreaseRotationY" onclick="modifyRotationY(-1);"> + -1º Yaw + </button> + <button id="decreaseRotationY" onclick="modifyRotationY(-10);"> + -10º Yaw + </button> + <button id="increaseRotationY" onclick="modifyRotationY(1);"> + +1º Yaw + </button> + <button id="increaseRotationY" onclick="modifyRotationY(1);"> + +10º Yaw + </button> + </span> + <span style="display: block"> + <span>Scene Y Position</span> + <button id="decreasePositionY" onclick="modifyPositionY(-0.1);"> + -10cm Y + </button> + <button id="increasePositionY" onclick="modifyPositionY(0.1);"> + +10cm Y + </button> + </span> + </div> + + <div id="play-button" onclick="compassPermission();" class="play-button"></div> + <!-- <div class="right-fixed"> <ul class="right-menu"> <li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img @@ -171,6 +213,108 @@ } }); </script> -<!-- <script src="./dist/3dstreet-editor.js"></script> --> +<script> + function compassPermission() { + document.getElementById("ar-overlay").style.visibility = "visible"; + + window.initialHeading = 0; + window.pauseCompass = false; + + window.modifyRotationY = function (deltaDegrees) { + const currentDegrees = document + .getElementById("street-container") + .getAttribute("rotation").y; + const newDegrees = currentDegrees + deltaDegrees; + document + .getElementById("street-container") + .setAttribute("rotation", "y", newDegrees); + }; + + window.modifyPositionY = function (deltaY) { + const currentY = document + .getElementById("street-container") + .getAttribute("position").y; + const newY = currentY + deltaY; + document + .getElementById("street-container") + .setAttribute("position", "y", newY); + }; + + // compassHeading sould be a value between [0, 360] where 0 is north + // (this is absolute relative to the device owner, completely separate from immersive session coordinates) + function compassCallback(compassHeading) { + if (window.initialHeading === 0) { + window.initialHeading = + AFRAME.scenes[0].camera.el.getAttribute("rotation").y; + } + + let alphaHeading = + AFRAME.scenes[0].camera.el.getAttribute("rotation").y - + window.initialHeading; + let deltaHeading = compassHeading + alphaHeading; + + document.getElementById("compass").textContent = + "compassHeading: " + compassHeading.toFixed(2) + "º "; + + if (!window.pauseCompass) { + document + .getElementById("street-container") + .setAttribute("rotation", "0 " + deltaHeading + " 0"); + } + } + + startCompassListener(compassCallback); + + function startCompassListener(callback) { + if (!window["DeviceOrientationEvent"]) { + console.warn("DeviceOrientation API not available"); + return; + } + let absoluteListener = (e) => { + if ( + !e.absolute || + e.alpha == null || + e.beta == null || + e.gamma == null + ) + return; + let compass = -(e.alpha + (e.beta * e.gamma) / 90); + compass -= Math.floor(compass / 360) * 360; // Wrap into range [0,360]. + window.removeEventListener("deviceorientation", webkitListener); + callback(compass); + }; + let webkitListener = (e) => { + let compass = e.webkitCompassHeading; + if (compass != null && !isNaN(compass)) { + callback(compass); + window.removeEventListener( + "deviceorientationabsolute", + absoluteListener + ); + } + }; + + function addListeners() { + // Add both listeners, and if either succeeds then remove the other one. + window.addEventListener( + "deviceorientationabsolute", + absoluteListener + ); + window.addEventListener("deviceorientation", webkitListener); + } + + if ( + typeof DeviceOrientationEvent["requestPermission"] === "function" + ) { + DeviceOrientationEvent["requestPermission"]().then((response) => { + if (response == "granted") { + addListeners(); + } else + console.warn("Permission for DeviceMotionEvent not granted"); + }); + } else addListeners(); + } + } +</script> </html> \ No newline at end of file diff --git a/src/viewer-styles.css b/src/viewer-styles.css index 44e35b9ad..9a351bcf1 100644 --- a/src/viewer-styles.css +++ b/src/viewer-styles.css @@ -1,6 +1,34 @@ @import url("notyf.min.css"); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500'); +.play-button { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 18vh; + height: 18vh; + background-color: #000000; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.play-button::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-40%, -50%); + border-style: solid; + border-width: 5vh 0 5vh 8vh; + border-color: transparent transparent transparent #aaaaaa; +} + +.play-button:hover { + background-color: #333333; +} + html { font-family: 'Lato', sans-serif; } From b97882ee3b7093b346f776516f0e658e8fc4ac21 Mon Sep 17 00:00:00 2001 From: Kieran Farr <kieran.farr@gmail.com> Date: Fri, 7 Jun 2024 14:09:21 -0700 Subject: [PATCH 2/3] fix overlay styles --- src/viewer-styles.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/viewer-styles.css b/src/viewer-styles.css index 9a351bcf1..db24d4b4c 100644 --- a/src/viewer-styles.css +++ b/src/viewer-styles.css @@ -12,6 +12,7 @@ border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; + z-index: 999999; } .play-button::before { @@ -29,6 +30,19 @@ background-color: #333333; } +#ar-overlay { + position: absolute; + left: 6px; + top: 6px; + padding: 6px; + /* + text-shadow: 0 0 5px white; + */ + max-width: 350px; + background-color: rgba(255, 255, 255, 0.7); + z-index: 999 +} + html { font-family: 'Lato', sans-serif; } From 31b9ed3d73e4c0a8f71e81c6756ce14bba92cb84 Mon Sep 17 00:00:00 2001 From: Kieran Farr <kieran.farr@gmail.com> Date: Fri, 7 Jun 2024 14:09:38 -0700 Subject: [PATCH 3/3] wip ar debugging --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 53091caa3..c9ef006f6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ <head> <!-- aframe --> - <script src="https://launchar.app/sdk/v1?key=5FXAKdmPAUHi5QV6zkUt8wPkBl6Wa4p6&redirect=true"></script> + <script src="https://launchar.app/sdk/v1?key=vDhrPJN2RAYrTKXak3LYKFPnPGKYAzKK&redirect=true"></script> <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <!-- 3dstreet --> @@ -23,7 +23,7 @@ }) </script> --> - <script> + <!-- <script> // TODO: This should be inside of Viewer Wrapper component logic // this makes the same camera rig setup work in VR and desktop modes // this could be a new component, such as "swap desktop and vr controls" and put in init section @@ -40,7 +40,7 @@ document.querySelector('#cameraRig').setAttribute('look-controls', "reverseMouseDrag: true;") document.querySelector('#cameraRig').setAttribute('wasd-controls', "enabled: true") }); - }) + }) --> </script> <title>3DStreet</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @@ -132,7 +132,8 @@ renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;" inspector="url: ./dist/3dstreet-editor.js" timed-inspector="1" loading-screen="enabled: false" notify metadata scene-title reflection device-orientation-permission-ui="enabled: false" - webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" xr-mode-ui="XRMode: ar"> + webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" + xr-mode-ui="enterARButton: #play-button; XRMode: ar;"> <a-assets> <!-- TODO: Add this to repo documentation --> <!-- you can specify a custom asset path using below syntax -->