如何在a帧中反转拖动旋转

Question

一个简单的问题。

示例，我正在构建一个全景查看器: <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

自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>

注意 -根据这个问题，这仍然只适用于台式机上的鼠标拖动，而不适用于移动设备上的触摸拖动。

Answer 2

在引入更多可扩展控件之前，我发布了一个反向查找控件组件。

反向查看控件组件: 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 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);