0

I have a threejs scene with a earth mesh and a camera that must rotate around it as the user drags on the screen. I seem to have found a complete deadlock on my way to fixing the camera rotation right now: It does rotate around the earth mesh but somehow the z axis is behaving incorrectly and causing wild-ish behavior on the zoom.

Here's the problematic scene in question

Machinarius
  • 3,637
  • 3
  • 30
  • 53

1 Answers1

0

I guess there is an error in there somewhere which is creating an elliptical orbit, so you get the impression of a zoom but the camera is in fact just moving closer and further away from the sphere. Whether that is in the calculation or whether there is something odd coming from hammer.js (I'm not familiar with this) - I'm not sure.

But if you are trying to get the camera to orbit, you might have better luck using the three.js extension "OrbitControls.js" which seems to do the majority of the number crunching for you. See the following link for the demo. https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html

Dan
  • 1,209
  • 3
  • 13
  • 29
  • Hammer.js is only used to determine when the user swypes/drags on the screen and the direction he did. I ignore the "length" of the drag, just using it's possitive or negative value to alter the value of the speed accordingly. I will check out your orbit suggestion, thanks. – Machinarius Mar 31 '14 at 11:01
  • OK so its an issue with the method you're using to calculate your orbit. The more I look at it, the more it looks like the orbit is possibly even square with the zoom out at a maximum at the corners. There's certainly a noticeable 'bounce' as it hits the furthest point and there's no trigonometry in your code either which I'd imagine would be needed. – Dan Mar 31 '14 at 11:37
  • My notebook sketch for this assumed that changing the movement multipliers would be enough to achieve a horizontal orbit. If i move the x and the z correctly i should be able to achieve a proper orbit movement. – Machinarius Mar 31 '14 at 11:44
  • Your assumptions are not correct and the method is probably creating a square or at least angular orbit. Mock it up with a spreadsheet if you want to check. Calculations of rotation in almost all code should be using Radians. If you want to correct the model, I'd suggest reading this post on calculating rotations: http://stackoverflow.com/questions/11363170/units-of-three-js-calculating-rotation-orbit-speeds. But I would stronly suggest you use the Orbit controls built to handle this exact problem for three.js, take a look at this: http://codepen.io/nireno/pen/cAoGI – Dan Mar 31 '14 at 12:01
  • 1
    I will check the notes you linked to when i have time to do so, in spirit of mending the error but will use Orbit for production. Thanks. – Machinarius Mar 31 '14 at 12:21