Three.js- Как я могу использовать ориентацию устройства в качестве контроля от первого лица
У меня есть сцена Three.js, которая позволяет пользователю перемещаться по использованию пользовательских элементов управления клавиатуры (не используя элементы управления библиотеки Three.js). Для мобильных устройств пользователь должен иметь возможность использовать элементы управления ориентацией устройства для маневрирования вокруг сцены, аналогично действиям на клавиатуре. Я в основном вижу примеры ориентации устройства с помощью three.js orbitcontrols. Как я могу использовать ориентацию устройства, чтобы перемещать камеру более свободно, подобно элементам управления клавиатуры? Ниже приведены функции клавиатуры для сцены:
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.")
}}