Mobile 使用A-Frame为移动设备创建垂直摄像头旋转触摸控制

最近我用a-Frame开发了很多东西，但更具体的目标是移动设备。我注意到的一点是，移动设备的触摸控制只允许水平摄像机旋转（左/右）。我意识到陀螺仪是相机旋转运动中的一个重要因素，但是使用触摸（水平和垂直）完全控制相机会更好。相机的默认设置仅允许水平旋转移动。我还没有看到将某些属性实现到摄影机实体，或者编写一些脚本。是否有一个简单的布尔属性可以在实体上设置，或者我完全偏离了基准？

我在内置的look controls组件上没有看到任何这样做的属性。因此，下一步将是创建您自己的版本并修改touchmove函数

我已经创建了一个初学者项目来帮助您加入：

我没有使用原生外观控件，而是创建了一个名为触摸外观控件的mod

在touchmove函数中，我添加了几行，以便它同时影响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模式的影响，加上它看起来像是在使用组件时启动的陀螺仪（复制粘贴外观控件的错误），所以请记住这一点

PPS：您可以在此处看到本机外观控件代码：

---

谢谢你的帮助。快速提问，将摄影机属性放置在a-entity元素内部，而不仅仅是使用a-camera元素，是否有好处？从长远来看，第一个选项的功能是否与另一个不同？我认为使用元素应该没问题。它们都使用相同的组件src，因此不会出现真正的差异。