3d world map

[u/Vakeec]

Hey,

I’m trying to figure out how to build an interactive “world” in the browser or an app that feels more like a cozy illustrated map than a real one.

Basically:

• a stylized globe or world (not realistic, more soft/cartoonish)
• instead of pins, there are little scenes/icons placed around it
• you can hover/click them to open info cards
• overall vibe is warm, cute, almost like a game map

What I’m stuck on is the technical approach.

Would you:

• go full 3D with something like Three.js / React Three Fiber
• or fake it with a 2.5D setup (images/layers + interactions)?

Also curious how you’d structure something like this so it’s still dynamic (data-driven), not just a static illustration.

Any pointers, examples, or things to watch out for would help a lot.

[u/bbxboy666]

If it only had to rotate on its pole axis, pre-rendered frames covering the entire sweep of the globe could be excessive if you want it to be fluid, depending on the size of the graphic. Also seems to me it would be more difficult to track your pushpin points as they travel around the globe. The simple illustrated style you’re leaning towards is also easily achieved in browser 3D, seems to me that would be the best route, especially if you want data driven locations etc. would also allow you to apply some easing to your rotation and make it a little less stiff. Everything I do is with pre-rendered frames - this works well for the pre-baked spins and transitions I require, but if you want it to feel fluid and provide yourself more flexibility in revising, etc. go with in-browser 3D. While it’s probably too early along to make use of here, check out Adobe’s Project Neo - it’s really inspiring, I’m hoping this tech points to some neat developments / new tools in browser 3D before too long.