Show confirmation button before creating DeviceOrientationControls

ma2yama · ma2yama · commit 8e34f610f91f · 2025-03-17T21:47:04.000+09:00
diff --git a/three.js/examples/location-based/index.html b/three.js/examples/location-based/index.html
@@ -3,10 +3,13 @@
 
 <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <title>AR.js Three.js</title>
     <style>
         html,
         body {
             height: 100%;
+            margin: 0;
         }
     </style>
 </head>
@@ -22,8 +25,20 @@
 </script>
 
 <body>
-    <video id='video1' autoplay playsinline style='display:none'></video>
-    <canvas id="canvas1" style='background-color: black; width:100%; height:100%; display:block'></canvas>
+    <video id="video1" autoplay playsinline style="display:none"></video>
+    <canvas id="canvas1" style="background-color: black; width:100%; height:100%; display:block"></canvas>
+
+    <div id="startModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center;">
+        <div style="background-color: white; padding: 6px; border-radius: 3px; width: 18rem; height: 12rem;">
+            <div style="width: 100%; height: 70%; display: flex; justify-content: center; align-items: center;">
+                <div style="font-size: 14pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>
+            </div>
+            <div style="display: inline-flex; width: 100%; height: 30%;  justify-content: center; align-items: center;">
+                <button id="startButton" style="width: 50%; height: 80%; font-size: 12pt;">OK</button>
+            </div>
+        </div>
+    </div>
+
     <script type="module" src="index.js"></script>
 </body>
 
diff --git a/three.js/examples/location-based/index.js b/three.js/examples/location-based/index.js
@@ -22,9 +22,22 @@ function main() {
     let orientationControls;
 
     // Orientation controls only work on mobile device
-    if (isMobile()){   
-        orientationControls = new DeviceOrientationControls(camera);
-    } 
+    if (isMobile()){
+        if (
+            window.DeviceOrientationEvent !== undefined &&
+            typeof window.DeviceOrientationEvent.requestPermission === "function"
+        ) {
+            document.getElementById("startModal").style.display = "flex";
+            const onStartClick = () => {
+                orientationControls = new DeviceOrientationControls(camera);
+                document.getElementById("startModal").style.display = "none";
+            }
+            document.getElementById("startModal").addEventListener("click", onStartClick);
+            document.getElementById("startButton").addEventListener("click", onStartClick);
+        } else {
+            orientationControls = new DeviceOrientationControls(camera);
+        }
+    }
 
     let fake = null;
     let first = true;
