在 Javascript 中检测到 Google 纸板磁性按钮点击

Question

参考 Detecting Magnetic Button on Cardboard in C# 是否可以在移动 phone 的浏览器中访问 Javascript 中的磁纸板按钮？

干杯斯特凡

Answer 1

实际上，您可以在渲染 WebGL 场景的 canvas 上监听 touchstart 事件。

canvas.addEventListener( "touchstart", onCardboardClick );

function onCardboardClick() {}

从技术上讲，点击发生在 mouseup 上，因此您可能想要附加 touchend 事件。那取决于你。

编辑评论

确保事件侦听器添加到右侧 canvas。您提到您使用了 THREE.js。所以我假设你有一个 WebGLRenderer 的实例。您可以通过引用那里来确保获得正确的元素。一切设置完成后，您可以添加

renderer.domElement.addEventListener( "touchstart", onCardboardTouch );

Answer 2

我终于能够自己解决问题了。幸运的是，时间和一点运气帮助解决了问题（到我真正要求的时候，这不可能实现）。

该解决方案基于 W3C 提出的 "Generic Sensor API"，特别是磁力计 API 的实施。

查看以下规格 - https://developers.google.com/web/updates/2017/09/sensors-for-the-web - https://www.w3.org/TR/generic-sensor/ - https://w3c.github.io/magnetometer/

但是，有一些注意事项：

您至少需要 Chrome 版本 63（我不知道目前是否有任何其他浏览器支持它），在我撰写本文时，该版本只能作为开发人员使用版本.
您需要启用
- chrome://flags/#enable-generic-sensor
- chrome://flags/#enable-generic-sensor-extra-类
代码必须通过 HTTPs 或本地主机传送！如果不是，你会得到安全异常...

我从更复杂的代码中提取了以下代码。希望我没有漏掉任何东西。

this.lastSensorX = 0;

try {
  this.sensor = new Magnetometer();
  if (this.sensor!==undefined) {
       this.sensor.start();
  }
} catch(err) {
            console.log("Magnetometer not supported. Make sure you configure chrome://flags/#enable-generic-sensor-extra-classes and deliver via HTTPS.");
}

....

// Check major differences on Magnetometer and identify this as a button-click

if (this.sensor !== undefined) {
  this.sensor.onreading = () => {
     var delta= this.sensor.x-this.lastSensorX;
      
     if (delta > 100 ) {
           // do whatever you want to do, in case the cardboard magnet has been "clicked"
     }
     this.lastSensorX = this.sensor.x;
  }
  
  this.sensor.onerror = event => console.log(event.error.name + " (Magnetometer): ", event.error.message);

}

我在我自己的应用程序中使用了上面的片段，它工作得很好。

Answer 3

我在 2020 年没有也不关心磁力按钮，但我竭力寻找在网络 VR 中实现 V2 纸板按钮的方法。

Cardboard 中禁用了触摸事件，虽然我在 chrome 中看到了对游戏手柄事件的引用和一个单按钮游戏手柄被注入以覆盖触摸事件，但我没有看到游戏手柄看过。

我终于找到了一个似乎涵盖所有基础的库——它会监听任何内容，并通过一个按钮触发所有内容，并且有东西在触发——所以我要回顾我研究过的所有地方并找到无效的答案并将其链接以帮助下一个可怜的灵魂：

https://dougreeder.github.io/aframe-button-controls/example.html

在 Javascript 中检测到 Google 纸板磁性按钮点击

Detect Google Cardboard Magnetic Button Click in Javascript

javascript

sensors

google-cardboard