Creating interactive 3D Map with GSAP and Canvas

[hagopkaz 0 Likes (Newbie)]

Hi,

 

I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks  exactly like what I'm intending: http://rainforest.arkivert.no/#kart

Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through.

 

Please advice.

 

Thanks in advance,

Hagop

[Visual-Q 979 Likes (Leader)]

This might be a job for three.js. 

 

https://threejs.org

 

I think you could rotate a jpeg on a plane to achieve it to a certain degree but it would still be a flat image so it wouldn't have the same effect, the example you show looks like a 3d model.

 

Beyond my pay grade on this forum though sounds like something  for Blake or one of the other big guns.

 

 

[hagopkaz 0 Likes (Newbie)]

Thank you for the response.

 

I have tried reverse engineering and found out that it's not really a 3D model, it's a JPG.

I hope one of the big guns to respond soon

[GreenSock 18,582 Likes (Superhero)]

Sorry, that's beyond the scope of what these forums are meant to address. We really try to stay focused on GSAP-specific questions. @OSUblake may have some suggestions for you (he does crazy complex/fun stuff regularly, but no guarantees. 

 

Good luck with the project!

[Sahil 2,655 Likes (Superhero)]

That website uses Pano2VR player and draggable on top of that to control the view. I think using draggable on top of it has to be easiest part and in forum you will find multiple examples of how to control some values using draggable. Pano2VR on the other hand will take some process of creating 3D views, 360 images etc.

 

https://ggnome.com/pano2vr