如何反转 A-Frame 中的拖动旋转？

Question

一个简单的问题。我用了 4-6 个小时才找到这个，但没有找到。

例如，我正在构建一个 全景查看器：<a-sky>

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>


<a-scene>
  <a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

如何通过拖动鼠标反转旋转？ （从左到右，从右到左 - 像这样）

Answer 1

我发布了一个 reverse-look-controls 组件，直到我们引入更多可扩展的控件。

反向查看控件组件： https://github.com/ngokevin/kframe/tree/master/components/reverse-look-controls

演示：

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgithub.com/ngokevin/kframe/master/components/reverse-look-controls/dist/aframe-reverse-look-controls-component.min.js"></script>

<a-scene>
  <a-entity camera reverse-look-controls></a-entity>
  <a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

Answer 2

自从 v0.6.0 在相机上使用此属性以来，内置了反转拖动旋转方向的功能

look-controls="reverseMouseDrag: true"

这是一个例子：

<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>


<a-scene>
  <a-entity camera look-controls="reverseMouseDrag: true"></a-entity>
  <a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

注意 - according to this issue这仍然只适用于台式机上的鼠标拖动，不适用于移动设备上的触摸拖动。

Answer 3

在实施 0.6.0 后，我觉得这不是运行在 a-videosphere 上的预期行为。

通过使用 *-1

更改第 67607 行和 67608 行，我能够获得预期的行为

aframe-v0.6.0.js

var currentRotationX = radToDeg(this.pitchObject.rotation.x  * -1);
var currentRotationY = radToDeg(this.yawObject.rotation.y  * -1);

如何反转 A-Frame 中的拖动旋转？

How to invert drag rotation in A-Frame?

javascript

mouse

drag

aframe