Mousemove to Deviceorientation（Accelerometer）

Question

我有视差场景，可以用鼠标移动，我想在我的书写中启用设备方向（加速度计），这样视差效果也能在设备上运行。

但是它非常棘手我无法弄清楚如何修改此脚本以向其添加deviceorientation。你能看看吗。

JSFIDDLE

PS：你可以在chrome中模拟面向设备！

如何创建此视差场景的教程是HERE

Answer 1

要向您的脚本添加deviceorientation，您应该能够通过注册 deviceorientation 事件监听器来挂钩deviceorientation事件。这是一个简单的代码，用于说明此过程。

对于您的情况，只需将以下代码添加到您的演示中，并自定义在设备方向更改时要执行的代码：

        //check if the browser supports the device orientation event   
               if(window.DeviceOrientationEvent) {
                  console.log("Browser supports the device orientation");
                  //registering deviceorientation event listener
                  window.addEventListener("deviceorientation", process, false);
                } else {
                  // The browser does not support the device orientation event
                   console.log("Browser does not support the device orientation");
                }

            function process(event) {
             //put the code to be executed when  device orientation is changed
              console.log("Device Orientation changed");
              var alpha = event.alpha;
              var beta = event.beta;
              var gamma = event.gamma;
              console.log("Alpha : " + alpha + "Beta : " + beta + "Gamma : " + gamma ); 
            }