Fix orientation controls for iOS13

index.html

@@ -123,10 +123,28 @@
     }
     .no-ui #loading { display: none; }
 
+    button {
+      color: orange;
+      font: inherit;
+      text-shadow: inherit;
+      border: 1px solid;
+      background: rgba(0,0,0,0.5);
+      line-height: 1.5;
+    }
+
     #keyboard-controls { display: block; }
     #mobile-device-controls { display: none; }
     .mobile-device #keyboard-controls { display: none; }
     .mobile-device #mobile-device-controls { display: block; }
+    #permit-motion-controls {
+      display: none;
+    }
+    .no-motion-controls #permit-motion-controls {
+      display: inline-block;
+    }
+    .no-motion-controls .motion-description {
+      display: none;
+    }
 
     canvas { display: block; }
 
@@ -166,8 +184,12 @@
     Scroll to increase/decrease your field of view.
   </div>
   <div id="mobile-device-controls">
-    <div class="no-pointer-events">Point your device around you to look around. Touch the screen to move forwards. Use two fingers to go faster.</div>
-    <div id="teleport">Teleport to next object</div>
+    <div class="no-pointer-events">
+      <span class="motion-description">Point your device around you to look around.</span>
+      Touch the screen to move forwards. Use two fingers to go faster.
+    </div>
+    <button id="permit-motion-controls">Click here to enable looking around</button>
+    <button id="teleport">Teleport to next object</button>
   </div>
 </div>
 

src/Simulation.js

@@ -140,6 +140,8 @@ class Simulation {
       })
     }
 
+    this.controlsManager.start()
+
     this.player.addController(this.keyboardControls)
     this.player.addController(this.mobileDeviceControls)
   }

src/controls/ControlsManager.js

@@ -8,13 +8,27 @@ export default class ControlsManager {
 
     this.onKeyPress = this.onKeyPress.bind(this)
     this.onDeviceOrientation = this.onDeviceOrientation.bind(this)
-
-    this.setDesktop()
   }
 
-  setDesktop () {
+  start () {
     window.addEventListener('deviceorientation', this.onDeviceOrientation, false)
 
+    if (window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermission) {
+      this.setMobile()
+
+      document.body.classList.add('no-motion-controls')
+      document.querySelector('#permit-motion-controls').addEventListener(
+        'click',
+        () => window.DeviceOrientationEvent.requestPermission(),
+        false
+      )
+    }
+    else {
+      this.setDesktop()
+    }
+  }
+
+  setDesktop () {
     this.keyboardControls.enable()
     this.mobileDeviceControls.disable()
 
@@ -27,7 +41,6 @@ export default class ControlsManager {
     this.controls = 'mobile'
 
     window.addEventListener('keypress', this.onKeyPress, false)
-    window.removeEventListener('deviceorientation', this.onDeviceOrientation, false)
 
     this.keyboardControls.disable()
     this.mobileDeviceControls.enable()
@@ -47,6 +60,9 @@ export default class ControlsManager {
     }
 
     this.setMobile()
+
+    document.body.classList.remove('no-motion-controls')
+    window.removeEventListener('deviceorientation', this.onDeviceOrientation, false)
   }
 
 }

src/postprocessing/EffectComposer.js

@@ -48,9 +48,7 @@ export default class EffectComposer {
 
   render () {
     for (let i = 0; i < this.passes.length; i++) {
-      let pass = this.passes[i]
-
-      pass.render(this.renderer, this.writeBuffer, this.readBuffer)
+      this.passes[i].render(this.renderer, this.writeBuffer, this.readBuffer)
     }
   }