How to invert drag rotation in A-Frame?

Question

A simple question. I used 4-6 hours to finding this but not found.

Example, Im building a panorama viewer : <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>

How to invert roation by drag mouse ? (Left to right , right to left - something like this)

Answer 1

The ability to reverse the drag rotation direction is built in since v0.6.0 using this attribute on the camera

look-controls="reverseMouseDrag: true"

Here's an example:

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

Note - according to this issue this still only works with mouse dragging on desktop machines, and does not work with touch dragging on mobile.

Answer 2

I published a reverse-look-controls component until we introduce more extensible controls.

Reverse Look Controls Component: https://github.com/ngokevin/kframe/tree/master/components/reverse-look-controls

---

Demo :

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