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

Question

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

Answer 1

我没有在内置的外观控件组件上看到任何执行此操作的属性。因此，下一步将是创建您自己的版本并mod验证 touchmove 函数。

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

我没有使用本机外观控件，而是创建了一个名为触摸外观控件的 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 有何影响 mode，而且看起来陀螺仪在使用该组件时被关闭（复制粘贴外观的错误-控件）所以请牢记这一点。

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

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

Creating vertical camera rotation touch control for mobile using A-Frame

mobile

camera

virtual-reality

aframe