I am trying to do a navigation system like google cloud infrastructure like this:
I want to do this using aframe rather than threejs. So I am now customising aframe orbit control by keven ngo:
The problem is that, I succeeded in limiting the auto rotation in a certain angle, so as pan. But I have some following problem that I do not know how to do after searching every posiblities and tried my self:
- how to achieve the same effect of bouncing back smoothly after reaching out the pan limit;
- for some reason if I pan and after
mouseup
then when mouse moves, it still pans rather than rotate. Why is that? - how to make camera rotates slightly like in google's example(I modified the original library to rotate camera when
mousemove
rahter thanmousedown
)?
Below is the glitch link of my experiment:
aframe customized orbit control
what I customized(I notated my change with slashes and ADDITION text):
- autorotates between set angle;
- mouse click only pans; when mouse move, camera rotates and autorotate stops;
- pan can be limited.
This is a long question, very appreciated if anyone can help!!