Loading... Loading... Loading... Loading... Loading... United Arab Emirates, Dubai
The delivered map: the 3D valley with tenant logo flags and the tenant directory
0%

Dhahran Techno Valley, explorable.

We turned DTVC's science park into a 3D map anyone can explore in a browser. 21 tenants and research centers, each one findable in seconds.

Client
Dhahran Techno Valley Company
Sector
Science and technology park
Platforms
Desktop and mobile web
Team
Two front-end and 3D developers

A logo wall can't show a valley.

SABIC, SLB, Baker Hughes, Honeywell, Halliburton and thirteen more companies run R&D centers here, alongside KFUPM's own research institutes. That density is DTV's pitch, and a brochure flattens it: no sense of who sits next to whom, how big each campus is, or where anyone actually is.

So every logo lands on its building.

We rebuilt the valley as a real-time 3D model of its roads, plots and buildings, seen from an architect's isometric angle. Each logo floats over its own roof, so the overview explains itself.

One campus, one colour.

Point at a building and everything that tenant occupies lights up in its own brand colour. SABIC's Technology & Innovation Center is spread over several lots. On the map it reads as one.

Your turn.

Search a name or point at a building. Drag to turn the valley, right-drag to move it, Ctrl + scroll to zoom.Search a name or tap a building. One finger turns the valley, two fingers move and zoom it.

Pick a tenant to see who they are and where they sit.

Open the full live map

A map that needs no manual.

Visitors, investors and prospective tenants can explore the park on their own. These are the screens DTVC shipped.

3D valley model
Roads, plots and buildings modelled in detail and rendered live in WebGL.
Logo flags
Every tenant's logo floats above its roof, so the overview reads at a glance.
Brand-colour highlighting
Hover a building and everything that tenant occupies lights up in its own colour.
Tenant directory
All 21 tenants in a sidebar, each with a profile: logo, what they do at DTV, website.
Live search
The directory narrows as you type. One letter at a time, down to one name.
Linked list and map
Pick a name in the list and the map shows you where it is.
Homepage mode
One URL switch strips the map down for the DTVC homepage: zoom buttons, keyboard zoom, logo tooltips.
Guided intro
A branded loader counts the real download, then a camera move brings the valley in.
  • The live map: the 3D valley with logo flags and the tenant directory
  • Homepage mode: SABIC's lots highlighted in its brand colour, with its logo in a tooltip and zoom buttons below
  • SABIC selected in the directory: its profile card with logo and description
  • Live search: typing "Hallib" narrows the directory to Halliburton
The map on a phone: the whole valley in view, with a menu button and the touch controls legend
The whole valley in view
The directory on a phone, opened full screen: the search field above the list of tenants
The directory, full screen, with search

Mouse or thumb, it just works.

The map fills the screen and the controls follow the input. On phones the directory slides in behind a menu button and search works exactly the same. A short legend in the corner means nobody has to guess.

Map controls by device
ActionDesktopTouch
TurnLeft dragOne finger
MoveRight dragTwo fingers
ZoomScroll wheelPinch

Built for the homepage too.

Add ?mode=home to the URL and the same codebase becomes an embed for the DTVC website. The sidebar goes and scroll-wheel zoom switches off, so the page still scrolls. Zoom buttons and +/− take over, and a click shows the tenant's logo.

The whole park, in one place.

What it looks like, who is there and what they do. Visitors explore DTV themselves instead of reading a brochure.

One source of truth
Names, logos, descriptions, brand colours and the buildings each tenant occupies live in one data file. A new tenant is a data change and a logo, not new code.
Works anywhere
Any modern browser, desktop or mobile. No app, no plugin, nothing to install.
Reusable on the website
The same codebase powers the full map and the homepage embed.
Every tenant in its own colours
Highlights use each company's brand colour, so partners recognise themselves on the map.

How it's built.

Stack

Technology stack
RenderingThree.js (WebGL), orthographic camera, orbit controls with damping
AnimationGSAP timelines for the loader fade and the intro camera move
3D assetsOne glTF binary (.glb) model of the valley
BuildVite for the dev server and production bundle, Sass for styles
UIVanilla JavaScript for the sidebar, search, tooltips and zoom

Content stays out of the renderer

Each tenant is one entry in a data file. Every frame, a raycaster casts from the pointer into the scene. When the nearest hit is one of a tenant's meshes, all of that tenant's meshes take its brand colour. Designers update the model and editors update the descriptions, and neither touches the rendering code.

{
  key: "sabic",
  objects: ["Line026", "Line027", "Line022", "Line023",
            "Line029", "Line025", "Circle001"],
  value: {
    name: "SABIC",
    logo: "Sabic.png",
    color: 0xffa506,
    description: "…"
  }
}

Architecture

One Experience object owns the scene and coordinates small modules.

The Experience singleton connected to its modules: Sizes and Time, Camera, Controls, Renderer, Resources, World, Preloader and GlobalState Experience Sizes / Time Camera Controls Renderer Resources World Preloader GlobalState
  • Resources loads every asset through one shared loading manager. That manager drives the loader percentage, then reports ready.
  • World builds the lighting, the valley model and the points of interest.
  • GlobalState reads the display mode (full map or homepage) from the URL.

Performance

  • The loader shows real download progress, so nobody stares at a blank screen.
  • Tight near and far planes and a zoom range of 0.5× to 5× keep every view predictable.
  • Damped orbit controls and a capped polar angle mean the camera can never slip under the ground.
  • On this page, the same model is quantized to about half its size and renders only while it's on screen.

Is your place easier to understand when people can explore it?

Business parks, campuses, real-estate developments, industrial cities and venues. Tell us about yours, and Voila will build the map that sells it.