[SOLVED] "Little Planet" Animation

Questions
1

Hi all!

Update:
Since in the meantime I found an easy solution for creating a “Little Planet” view and animating it to a panorama view (using @yomotsu’s amazing camera-controls library), I’ve now deleted my original problem description, and instead I’m posting a link to my solution:

Any suggestions for improvement are welcome!

little_planet
little_planet898×576 37.2 KB

2 Likes
2

Hi @digitalArt3DTobias …

Write me if this link helps You anyway…

https://jrlazz.eu5.org/anim/tobias_01.html

2 Likes
3

Thanks for your efforts! However, your code does not work correctly for me: If I change the azimuth angle from 0 to 1 after opening your page, the view jumps (which should be caused by the fact that the polar angle is actually only defined between -90 and +90). But that doesn’t matter, as I have found a clean solution in the meantime (see above).

1 Like
4

Everything ok… I liked Your Final Result! :wink:

PS1: Although different from what was requested.

PS2: I would suggest for the Final Result:
if(camera.position.y>500){ camera.position.y=500;}
in function onFrameRequest(),
to prevent this:
tobias_jpg_1
in Morph to “little planet” view.

PS3: At the first post You have mentioned “I’d assume that there is a more straightforward solution in Three.js as well(?)… Any advice would be highly appreciated, since I’d like to create my project with Three.js!”
But in the Final Result there is something beyond Three.js (https://cdn.jsdelivr.net/npm/camera-controls@2.7.3/+esm).

PS4: I made a mistake and kept the same name for the last revised page…
So, could You please enter the page:

https://jrlazz.eu5.org/anim/tobias_02.html

which is the last version done!

1 Like
5

Thank you again for your feedback!

In fact I want to create my app with Three.js instead of Babylon.js (even though my first successful “little planet” attempt was implemented with Babylon.js). Therefore I wrote “with Three.js” explicitly - which from my point of view doesn’t necessarily mean to renounce useful Three.js plugins, implementing everything with “vanilla” Three.js. Sorry for the confusion!

Thanks for pointing out the zoom issue. That’s important, of course. But in the real app orbiting/zooming should only be allowed in panorama mode anyway. In the demo linked above I didn’t prevent this deliberately, to make it easy to play around with the parameters and observe what happens.

Here is a quick version where camera controls are completely disabled in “little planet” mode (and zoom in panorama mode is allowed between defined limits):

1 Like