Question

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

Answer 1

我没有在内置的look-controls组件上看到任何属性。因此，下一步是创建自己的版本并修改touchmove功能。

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

我没有使用原生的外观控件，而是创建了一个名为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模式，而且看起来陀螺仪在使用组件时会被设置（复制粘贴外观控件的错误），所以请记住这一点。

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

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

1 个答案: