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)

Antilebanon

I'll release a component for you. Basically fork look-controls and inverse the mouse-drag. I believe Don McCurdy's aframe-extras controls can reverse as well. – Coggins

@Coggins thanks, Should i open an issue on Github ? – Antilebanon

I've posted an answer below. It was deleted by mods earlier, but it's back now. – Coggins

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.

Polymerous

Thanks !, I will accept this answer when they are fixed. (Still not work for 0.6.1 on mobile devices) – Antilebanon

Update on 0.9.x: current implementation is to add <a-camera look-controls="reverseMouseDrag: true" /> in the very last element of scene. That was the only way to get this work properly – Atal

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>

Coggins

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Alboin

Thanks, but it's linking to a 3rd party module I put together that provides the solution. There's not really any way around it without using a link in some manner. – Coggins

Thanks, This is safe to use ? – Antilebanon

@tarzanbappa, I edited his answer as StackOverflow style, lol, Thanks so much – Antilebanon

@Coggins thanks! i'm trying to emulate the feel of Street View, the nice thing is that when you click and drag in street view it keeps the object you're dragging under the cursor. it doesnt rotate the scene at a linear speed, it speeds up / slows down depending on distance from center, camera FOV, etc. is this possible to implement or way too much? – Lach

Answer 3

After implementing 0.6.0 I feel this is not the intended behavior when running on an a-videosphere.

I was able to get the intended behavior by altering lines 67607 and 67608 with a *-1

aframe-v0.6.0.js

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

Loth