Add device orientation test

AR-js-org · Dec 23, 2024 · 1c8323f · 1c8323f
1 parent 6195658
commit 1c8323f
Show file tree

Hide file tree

Showing 20 changed files with 3,891 additions and 3,851 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,10 @@ Some of these issues, such as incorrect North on some devices, may well be to do
 
 For this reason, the focus at present will be on developing a **pure three.js version only**. When we believe that the key bugs and issues have been resolved, the plan is to then provide an A-Frame wrapper.
 
+## Cross-platform Compatibility
+
+Chrome on Android is recommended. It may also work on Chrome in iOS; please file an issue if not. It will not work on Safari on iOS, due to permissions issues - **though pull requests are welcome to fix this**. Firefox unfortunately does not appear to fully implement the Device Orientation API so is unlikely to work
+
 ## Using the library
 
 The library has been published to `npm` so you can install with:

diff --git a/docs/01-helloworld/index.html b/docs/01-helloworld/index.html
@@ -2,8 +2,9 @@
 <html>
 <head>
 <title>three.js</title>
-  <script type="module" crossorigin src="/locar.js/assets/01-helloworld-C3Ps4H1F.js"></script>
-  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-CkPE0o6E.js">
+  <script type="module" crossorigin src="/locar.js/assets/01-helloworld-BlqDPYE-.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/modulepreload-polyfill-B5Qt9EMX.js">
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-B7Q9QSyi.js">
 </head>
 <body>
 </body>

diff --git a/docs/02-gps-and-sensors/index.html b/docs/02-gps-and-sensors/index.html
@@ -2,8 +2,9 @@
 <html>
 <head>
 <title>three.js</title>
-  <script type="module" crossorigin src="/locar.js/assets/02-gps-and-sensors-W9Vrp_cg.js"></script>
-  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-CkPE0o6E.js">
+  <script type="module" crossorigin src="/locar.js/assets/02-gps-and-sensors-B6zTVYc_.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/modulepreload-polyfill-B5Qt9EMX.js">
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-B7Q9QSyi.js">
 </head>
 <body>
 </body>

diff --git a/docs/03-api-communication/index.html b/docs/03-api-communication/index.html
@@ -2,8 +2,9 @@
 <html>
 <head>
 <title>three.js</title>
-  <script type="module" crossorigin src="/locar.js/assets/03-api-communication-DGcf2jls.js"></script>
-  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-CkPE0o6E.js">
+  <script type="module" crossorigin src="/locar.js/assets/03-api-communication-NDo1RJk2.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/modulepreload-polyfill-B5Qt9EMX.js">
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-B7Q9QSyi.js">
 </head>
 <body>
 </body>

diff --git a/docs/assets/01-helloworld-BlqDPYE-.js b/docs/assets/01-helloworld-BlqDPYE-.js
diff --git a/docs/assets/01-helloworld-C3Ps4H1F.js b/docs/assets/01-helloworld-C3Ps4H1F.js
diff --git a/docs/assets/02-gps-and-sensors-B6zTVYc_.js b/docs/assets/02-gps-and-sensors-B6zTVYc_.js
diff --git a/docs/assets/02-gps-and-sensors-W9Vrp_cg.js b/docs/assets/02-gps-and-sensors-W9Vrp_cg.js
diff --git a/docs/assets/03-api-communication-DGcf2jls.js b/docs/assets/03-api-communication-DGcf2jls.js
diff --git a/docs/assets/03-api-communication-NDo1RJk2.js b/docs/assets/03-api-communication-NDo1RJk2.js
diff --git a/docs/assets/devorient-CH4DwcZB.js b/docs/assets/devorient-CH4DwcZB.js
@@ -0,0 +1 @@
+import"./modulepreload-polyfill-B5Qt9EMX.js";window.addEventListener("deviceorientationabsolute",e=>{document.getElementById("devorient").innerHTML=`Alpha: ${e.alpha}<br />Beta: ${e.beta}<br />Gamma: ${e.gamma}`});
diff --git a/docs/assets/locar.es-B7Q9QSyi.js b/docs/assets/locar.es-B7Q9QSyi.js
diff --git a/docs/assets/locar.es-CkPE0o6E.js b/docs/assets/locar.es-CkPE0o6E.js
diff --git a/docs/assets/modulepreload-polyfill-B5Qt9EMX.js b/docs/assets/modulepreload-polyfill-B5Qt9EMX.js
diff --git a/docs/devorient/index.html b/docs/devorient/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Device Orientation Test</title>
+  <script type="module" crossorigin src="/locar.js/assets/devorient-CH4DwcZB.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/modulepreload-polyfill-B5Qt9EMX.js">
+</head>
+<body>
+<h1>Device Orientation Test</h1>
+<div id='devorient'></div>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -22,5 +22,7 @@ <h2>Examples</h2>
 </ol>
 <h2>API documentation</h2>
 <p>Please see <a href='/locar.js/api'>here</a>.</p>
+<h2>Device Orientation Test</h2>
+<p>You can use <a href='/locar.js/devorient/index.html'>this test page</a> to test your device orientation. The "alpha" value should match the bearing the device is facing, in degrees.</p>
 </body>
 </html>
diff --git a/examples/devorient/index.html b/examples/devorient/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Device Orientation Test</title>
+<script type='module' src='src/main.js'></script>
+</head>
+<body>
+<h1>Device Orientation Test</h1>
+<div id='devorient'></div>
+</body>
+</html>
diff --git a/examples/devorient/src/main.js b/examples/devorient/src/main.js
@@ -0,0 +1,4 @@
+window.addEventListener("deviceorientationabsolute", e => {
+    document.getElementById("devorient").innerHTML = 
+        `Alpha: ${e.alpha}<br />Beta: ${e.beta}<br />Gamma: ${e.gamma}`;
+});
diff --git a/examples/index.html b/examples/index.html
@@ -22,5 +22,7 @@ <h2>Examples</h2>
 </ol>
 <h2>API documentation</h2>
 <p>Please see <a href='/locar.js/api'>here</a>.</p>
+<h2>Device Orientation Test</h2>
+<p>You can use <a href='/locar.js/devorient/index.html'>this test page</a> to test your device orientation. The "alpha" value should match the bearing the device is facing, in degrees.</p>
 </body>
 </html>
diff --git a/examples/vite.config.mjs b/examples/vite.config.mjs
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import { resolve } from 'path';
 
 const entries = { main: 'index.html' };
-['01-helloworld', '02-gps-and-sensors', '03-api-communication'].forEach ( example => {
+['01-helloworld', '02-gps-and-sensors', '03-api-communication', 'devorient'].forEach ( example => {
     entries[example] = resolve(__dirname, `${example}/index.html`);
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import"./modulepreload-polyfill-B5Qt9EMX.js";window.addEventListener("deviceorientationabsolute",e=>{document.getElementById("devorient").innerHTML=`Alpha: ${e.alpha}<br />Beta: ${e.beta}<br />Gamma: ${e.gamma}`});