Three.js-如何将设备方向用作第一人称控件

Question

我有一个three.js场景，允许用户漫游使用自定义键盘控件（不使用three.js库控件）。对于移动设备，用户应该能够使用device orientation控件在场景周围进行操作，类似于键盘操作。我主要看到使用three.js轨道控制的设备方向示例。与键盘控件类似，如何使用设备方向更自由地移动相机？下面是场景的键盘功能：

var keyboard = {};
        var player= {height:30, speed:10, turnSpeed:Math.PI*0.02};
  if(keyboard[87]){ // W key
    var matrix = new THREE.Matrix4();
    matrix.extractRotation( mesh.matrix );
    let axis = new THREE.Vector3(0,0,-1);
    axis = matrix.multiplyVector3(axis);
    camera.translateOnAxis(axis,player.speed);
    }
 if(keyboard[83]){ // S key
    var matrix = new THREE.Matrix4();
    matrix.extractRotation( mesh.matrix );
    let axis = new THREE.Vector3(0,0,1);
    axis = matrix.multiplyVector3(axis);
    camera.translateOnAxis(axis,player.speed);
 }
   if(keyboard[65]){ // A key
    var matrix = new THREE.Matrix4();
    matrix.extractRotation( mesh.matrix );
    let axis = new THREE.Vector3(-1,0,0);
    axis = matrix.multiplyVector3(axis);
    camera.translateOnAxis(axis,player.speed);
  }
  if(keyboard[68]){ // D key
    var matrix = new THREE.Matrix4();
    matrix.extractRotation( mesh.matrix );
    let axis = new THREE.Vector3(1,0,0);
    axis = matrix.multiplyVector3(axis);
    camera.translateOnAxis(axis,player.speed);
}

 if(keyboard[39]){ // left arrow key
  camera.rotation.y -= player.turnSpeed;
 }
   if(keyboard[37]){ // right arrow key
  camera.rotation.y += player.turnSpeed;
 }
function device(){
if(window.DeviceOrientationEvent){
window.addEventListener('deviceorientation', function handleOrientation(event){
  var x = event.beta;
  var y = event.gamma;
  var z = event.alpha;
  if(x >90){x=90};
  if(x<-90){x=-90};
  x+= 90;
  y+= 90;

       if(x<50 && x>0){
         var matrix = new THREE.Matrix4();
       matrix.extractRotation( mesh.matrix );
       let axis = new THREE.Vector3(0,0,-1);
       axis = matrix.multiplyVector3(axis);
       camera.translateOnAxis(axis,player.speed);}
       if(y<0){
         var matrix = new THREE.Matrix4();
         matrix.extractRotation( mesh.matrix );
         let axis = new THREE.Vector3(-1,0,0);
         axis = matrix.multiplyVector3(axis);
         camera.translateOnAxis(axis,player.speed);
       }
       if(y>0){
         var matrix = new THREE.Matrix4();
         matrix.extractRotation( mesh.matrix );
         let axis = new THREE.Vector3(1,0,0);
         axis = matrix.multiplyVector3(axis);
         camera.translateOnAxis(axis,player.speed);
       }
       if(x>50 && x<90){
         var matrix = new THREE.Matrix4();
         matrix.extractRotation( mesh.matrix );
         let axis = new THREE.Vector3(0,0,1);
         axis = matrix.multiplyVector3(axis);
         camera.translateOnAxis(axis,player.speed);
       }


})
}
 else{
alert("Sorry, your broweser doesn't support this game. Try it on Desktop.")
 }}