3D & Digital Twin20269.6213° N, 125.9662° E
Socorro 3D — Interactive 3D GIS & Geospatial Visualization
An interactive 3D map of Socorro on Bucas Grande Island, Philippines, rendering the town’s coastline, landmarks and live weather in real-time WebGL.
- Role
- Contributor
- Client
- John Micheal Acera (creator)
- Timeline
- Ongoing
- Platform
- Web application
- 14landmark buildings modeled
- 24hday/night cycle
- 5weather presets
Overview
The brief
Socorro 3D, created by John Micheal Acera, is a web-based 3D map of Socorro, Surigao del Norte, on Bucas Grande Island in the Philippines. It makes local geography easy to explore through interactive navigation, three-dimensional terrain and landmarks, and a friendly, game-like interface.
Challenge
What made it hard
Small island towns rarely have more than a flat map online. Socorro’s terrain, coastline and landmarks had to be explorable in 3D, smoothly, in an ordinary browser.
Solution
How I built it
As a contributor to the project, I worked in its Next.js 16 and Three.js r184 codebase. The scene renders the coastline, roads, port boats, people and ocean in real-time WebGL 2 with EffectComposer post-processing, runs a day/night cycle with live OpenWeatherMap weather through a server-side proxy, and layers folklore discovery orbs and community event pins over the town.
Key features
- Real-time 3D coastline, roads, port and ocean in WebGL
- Landmark buildings with explorable map labels
- Day/night cycle with a time-of-day slider
- Live weather from OpenWeatherMap via a server proxy
- First-person exploration mode and shareable views
- Folklore discovery orbs and community event pins
Tech stack
- Three.js
- Next.js
- TypeScript
- WebGL 2
- Tailwind CSS
- Web Audio API
- OpenWeatherMap
See it running
Open the live app in your browser.