Interactive 3D Globe with Popups Three.js

Заказчик: AI | Опубликовано: 11.11.2025
Бюджет: 750 $

I will provide list of regions for each country in the game. Each region belongs to a specific country, and every region inside the same country must share the same fill colour while regions belonging to other countries appear in distinct colours. Regions can change owners depending on wars in game (and with that the color as well) The map will live on a website, rendered as a smooth-rotating 3D globe built with Three.js. A lightweight Flask back-end can serve the page and the GeoJSON assets; I am already comfortable working in Python, so keeping everything inside that stack is ideal. Core functionality I need from you: • Load the three GeoJSON sources, merge them on the client side, and draw the regions on the globe surface. • Apply country-level colour grouping automatically from the data. • Make every region clickable and with precision: when a visitor selects one, an on-globe popup (or tooltip) should appear, able to show both an image and rich text that I will supply in a simple JSON or similar look-up file. • Keep navigation intuitive—drag to rotate, scroll or pinch to zoom—and responsive on common modern browsers. Acceptance criteria 1. All regions display in the correct colour scheme without visible gaps or overlaps. 2. Click events consistently open the styled popup with the provided image + text. 3. Globe runs at 60 fps on a typical laptop in Chrome. 4. Deliverable includes the Flask route(s), bundled front-end code, and concise setup instructions so I can run `python app.py`, open a browser, and see the globe live. If you have previous Three.js or WebGL globe work, please link it so I can evaluate interaction fluidity.