Jump to content
hagopkaz

Creating interactive 3D Map with GSAP and Canvas

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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!

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.