Hey Guys,
I have a 3d globe with clickable markers set up.
I would like to achieve the exact same transition as this website when a green marker is clicked: https://www.fonterra.com/nz/en/campaign/from-here-to-everywhere.html#/home
When the user clicks on a marker the camera should get closer to the surface of the globe, looking at the marker’s position (instead of the center of the globe). At the same time the globe should move to the bottom of the canvas making only a small portion of it visible.
Can someone please point me in a direction as in how I could achieve this?
2 Likes
You can use an animation library like GSAP to perform the camera animation. If you move the camera closer to the planet, you will automatically achieve a zoom effect (this technique is called dollying). Simple live example: https://jsfiddle.net/8j4dfvx9/1/
1 Like
Hey Thanks for the reply and example! Really helpful!
The only problems I’m still having is getting the Sphere to then also show itself partly on the canvas while having the clicked position centered in the different perspective like the 2nd screenshot above. You can see a working example of what I try to achieve here https://www.fonterra.com/nz/en/campaign/from-here-to-everywhere.html#/home (click on a green marker)
Any idea how this could be done? I figured it should be some kind of formula so it would always automatically find that position for every marker that is clicked on
You could do it by only moving the camera.
An example which moves the camera to a position somewhat like your example had.
https://jsfiddle.net/amitlzkpa/yfsdo7kx/
It takes into consideration the angle the globe is being looked at when trying to find the new position and view direction.
If the camera is set to a consistent position relative to the globe when clicked out from a marker it could be made to behave more like the example.
@pjayofficial any luck with this ?? Actually I need a same functionality, any tips where to start?
thanks,
