Обнаруживать магнитную кнопку Google Cardboard Нажмите на Javascript

Question

С ссылкой на Detecting Magnetic Button on Cardboard in C# есть ли в любом случае доступ к кнопке магнитного картона в Javascript в браузере мобильного телефона?

веселит Стефан

Answer 1

Я, наконец, смог решить проблему самостоятельно. К счастью, время и немного удачи помогли решить проблему (к тому времени, когда я действительно просил об этом, это было бы невозможно).

Решение основано на «API-интерфейсе общего датчика», предложенном W3C и, в частности, в реализации для 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 (и я не в курсе что любой другой браузер в настоящее время поддерживает его), который к моменту моего написания доступен только в качестве выпуска для разработчиков.

• Вам необходимо включить

  • хром: // флаги/# включить унифицированный-датчик

  • хром: // флаги/Разрешают-родовой-сенсор-экстра-классы

• Код должен быть доставлен через HTTP или с сайта localhost! Если нет, вы получаете исключения безопасности ...

Я извлек следующий код из моего более сложного кода. Надеюсь, я ничего не пропустил.

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 2

Вы можете на самом деле просто прослушайте touchstart события на холсте, который рендеринга WebGL сцену.

canvas.addEventListener("touchstart", onCardboardClick); 

function onCardboardClick() {} 

Нажмите технически происходит на mouseup, так что вы можете захотеть атташе touchend событие вместо этого. Это зависит от вас.

EDIT ДЛЯ КОММЕНТАРИЕВ

Убедитесь, что приемник событий добавляется в правый холст. Вы упомянули, что использовали THREE.js. Поэтому я предполагаю, что у вас есть экземпляр WebGLRenderer. Вы можете убедиться, что получите правильный элемент, указав там ссылку. После того, как все настроено, вы можете добавить

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