Google Cardboard Magnetic Button Detection Click in Javascript

Question

With reference to Detecting a magnetic button on a cardboard in C #, is there access to the magnetic cardboard button in Javascript in a mobile phone browser?

amuses Stefan

Answer 1

Finally, I was able to solve the problem. Fortunately, time and a bit of luck helped solve the problem (this would not have been possible by the time I really requested it).

The solution is based on the "common sensor API" proposed by W3C and, in particular, on the application of the Magnetometer API.

. - https://developers.google.com/web/updates/2017/09/sensors-for-the-web - https://www.w3.org/TR/generic-sensor/ - https://w3c.imtqy.com/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);

}

Hide result

, .

Answer 2

touchstart , WebGL.

canvas.addEventListener( "touchstart", onCardboardClick );

function onCardboardClick() {}

mouseup, touchend. .

, . , THREE.js. , WebGLRenderer. , , . , ,

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