使用A框架为移动设备创建垂直相机旋转触摸控制

Question

如今，我正在使用A框架开发很多，但更具体地针对移动设备。我注意到的一件事是，移动的触摸控件仅允许水平摄像机旋转运动(左/右(。我意识到陀螺仪是相机旋转运动的重要因素，但是使用触摸(水平和垂直(对相机充分控制将是很好的。相机的默认设置仅允许水平旋转运动。我还没看过是为相机实体实现某些属性或编写一些脚本。我可以在一个实体上设置一个简单的布尔属性，还是我完全脱离了基础？

Answer 1

我没有看到任何属性可以在内置的look-controls组件上执行此操作。因此，下一步将是创建自己的版本并修改触摸move函数。

我已经创建了一个入门项目来帮助您跳入：https://glitch.com/edit/# ！/a-frame-touch-look-controls

而不是使用本机审见控制，我创建了一个称为触摸look-controls的mod。

在触摸move函数中，我添加了几行，因此它影响x和y轴：

onTouchMove: function (evt) {
  var canvas = this.el.sceneEl.canvas;
  var deltaX, deltaY;
  var pitchObject = this.pitchObject;
  var yawObject = this.yawObject;
  if (!this.touchStarted || !this.data.touchEnabled) { return; }
  deltaY = 2 * Math.PI * (evt.touches[0].pageX - this.touchStart.x) / canvas.clientWidth;
  deltaX = 2 * Math.PI * (evt.touches[0].pageY - this.touchStart.y) / canvas.clientHeight;
  // Allow touch orientaion to both x and y
  yawObject.rotation.y -= deltaY * 0.5;
  pitchObject.rotation.x -= deltaX * 0.5;
  pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x));
  this.touchStart = {
    x: evt.touches[0].pageX,
    y: evt.touches[0].pageY
  };
},

ps：我没有彻底测试这对VR模式的影响，而且看起来陀螺仪在使用组件时(复制粘贴look-controls的错误(时，陀螺仪会始终如一。P>

pps：您可以在此处查看本机look-controls代码：https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js