Dubai Rockside — 3D Terrain Viewer
An interactive 3D terrain viewer that lets you orbit, zoom, and read elevation across the Rockside area. A QGIS terrain export brought to life in the browser with Three.js and correctly georeferenced with Proj4.js.
View live demoRole
Front-end / 3D
Year
May 2026
Type
GIS / 3D
Stack
Three.js, QGIS
Description
A GIS-meets-WebGL experiment: take a real terrain dataset out of QGIS and make it explorable in a browser. The viewer renders an elevation model of the Rockside area as a navigable 3D scene, where you can orbit the camera, zoom in on ridges and valleys, and read elevation directly off the surface. The pipeline exports from QGIS, reprojects coordinates with Proj4.js so the geometry lands in the right place, and draws it all with Three.js.
Key Features
-
Orbit & Zoom: Smooth orbit controls and zoom for inspecting the terrain from any angle.
-
Elevation Readout: Read elevation values off the model to understand the lay of the land.
-
QGIS Pipeline: A real QGIS terrain export driving the geometry, not a decorative mesh.
-
Accurate Projection: Coordinate reprojection with Proj4.js so the scene is georeferenced correctly.
Technologies Used
-
Rendering: Three.js with WebGL and OrbitControls for the interactive 3D scene.
-
GIS: QGIS (via Qgis2threejs) for the terrain export, with Proj4.js handling coordinate reprojection.
Years of
Experience
Projects
Finished
Unique
Clients Served
Client
Nationalities
Get in touch
Have a project in mind, or just want to chat about design and frontend?LinkedIn or email are the fastest way to reach me - happy to share WhatsApp and Telegram once we connect.