使用 A-Frame 为移动设备创建垂直相机旋转触控答案

【问题标题】：Creating vertical camera rotation touch control for mobile using A-Frame使用 A-Frame 为移动设备创建垂直相机旋转触控
【发布时间】：2018-07-20 12:36:32
【问题描述】：

这些天来，我正在使用 A-Frame 进行很多开发，但更具体地针对移动设备。我注意到的一件事是移动设备的触摸控件只允许水平相机旋转移动（左/右）。我意识到陀螺仪是相机旋转运动的一个重要因素，但是使用触摸（水平和垂直）完全控制相机会很好。相机的默认设置只允许水平旋转移动。我还没有看到要为相机实体实现某些属性，或者编写一些脚本。我可以在实体上设置一个简单的布尔属性，还是我完全脱离了基础？

【问题讨论】：

标签： mobile camera aframe virtual-reality

【解决方案1】：

我没有在内置的外观控制组件上看到任何属性。所以下一步就是创建自己的版本并修改 touchmove 函数。

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

我创建了一个名为 touch-look-controls 的模组，而不是使用原生外观控件。

在 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：您可以在此处查看本机外观控制代码： https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js

【讨论】：

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