5

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)

l2aelba
  • 21,591
  • 22
  • 102
  • 138

3 Answers3

9

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.

davnicwil
  • 28,487
  • 16
  • 107
  • 123
  • Thanks !, I will accept this answer when they are fixed. (Still not work for 0.6.1 on mobile devices) – l2aelba Aug 28 '17 at 07:31
  • 1
    Update on *0.9.x*: current implementation is to add `` in the very last element of scene. That was the only way to get this work properly – Samuli Hakoniemi Nov 24 '19 at 22:12
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>
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • 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](/review/low-quality-posts/13751418) – tarzanbappa Sep 22 '16 at 02:18
  • 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. – ngokevin Sep 22 '16 at 05:45
  • Thanks, This is safe to use ? – l2aelba Sep 22 '16 at 08:34
  • @tarzanbappa, I edited his answer as StackOverflow style, lol, Thanks so much – l2aelba Sep 22 '16 at 09:00
  • @ngokevin 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? – Ben Dec 15 '16 at 21:53
0

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);
Clayton Graul
  • 1,445
  • 1
  • 10
  • 7