Google Cardboard 마그네틱 버튼 감지 자바 스크립트에서 클릭

Question

Detecting Magnetic Button on Cardboard in C#을 참조하여 휴대 전화 브라우저에서 Javascript 내의 마그네틱 카드 보드 버튼에 액세스 할 수 있습니까?

환호 스테판

Answer 1

마지막으로 문제를 직접 해결할 수있었습니다. 다행스럽게도 시간과 행운이 해결책을 찾는데 도움이되었습니다 (실제로 내가 요구할 때까지는 불가능했을 것입니다).

이 솔루션은 W3C에서 제안한 "일반 센서 API"와 특히 자력계 API 구현을 기반으로합니다.

• 당신은 적어도 크롬 버전 63이 필요합니다 (내가 인식하지 오전 : https://developers.google.com/web/updates/2017/09/sensors-for-the-web - - - https://www.w3.org/TR/generic-sensor/ 그러나 https://w3c.github.io/magnetometer/

  , 몇 가지주의가

  는 다음과 같은 사양이 참조 다른 어떤 브라우저도 현재 지원하고 있습니다). 필자는 서면으로 개발자 버전으로 만 사용할 수 있습니다. // 플래그/# 가능 - 일반적인 센서

• 크롬 : // 플래그/# 활성화 제네릭 센서를-여분 클래스

• 당신은

  • 크롬을 활성화해야

• 코드는 HTTP 또는 로컬 호스트를 통해 전달되어야합니다! 그렇지 않다면 보안 예외가 발생합니다 ...

나는 훨씬 복잡한 코드에서 다음 코드를 추출했습니다. 나는 아무것도 간과하지 않았 으면 좋겠다.

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

당신은 실제로 당신의 WebGL이 장면을 렌더링하고 캔버스에 touchstart 이벤트를 수신 할 수 있습니다.

canvas.addEventListener("touchstart", onCardboardClick); 

function onCardboardClick() {} 

클릭 기술적으로 그래서 당신은 대신 touchend 이벤트를 무관 할 수도 mouseup에 일어나고있다. 그건 너에게 달렸어. COMMENT

에 대한

편집 이벤트 리스너가 바로 캔버스에 추가됩니다 있는지 확인합니다. THREE.js를 사용했다고 언급하셨습니까? 그래서 당신이 WebGLRenderer의 인스턴스를 가지고 있다고 가정합니다. 거기에서 참조를 취함으로써 올바른 요소를 얻을 수 있는지 확인할 수 있습니다. 모든 것이 설치되면 추가 할 수 있습니다.

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