En real-time 3D-oplevelse, der placerer alle fartøjer på kortet.

Projekt

Purpose

Samarbejdsbureau

Pravda

Kunde

Uni-Tankers A/S

OM

Uni-Tankers er et dansk rederi med mere end 40 olie- og kemikalietankskibe i drift verden over. Sammen med brandbureauet Pravda engagerede de Webnorth til at udvikle Purpose, en specialbygget React Three Fiber-applikation, der kombinerer en live 3D-klode, realtidsdata fra flåde og kontorer samt en interaktiv cargovisualisering. Resultatet er et af de mest teknisk ambitiøse webprojekter i Webnorths historie.

Besøgende lander i et filmisk showreel, før de træder ind i en interaktiv 3D-klode, hvor hvert fartøj i flåden spores i realtid. Oplevelsen er skabt til at blive udforsket, med mulighed for at bevæge sig mellem skibe, følge live positions- og rutedata og dykke ned i cargovisualiseringen for at forstå, hvad flåden transporterer, og hvor den er på vej hen. Purpose gør en global shippingforretning nærværende, visuel og let at navigere i.

BRANCHE

Maritim

PROJEKTTYPE

Komplet udvikling

VARIGHED

5-6 måneder

SPROG

Engelsk

KERNETEKNOLOGI

React Three Fiber,
MS Fabric GraphQL, Three.js.

PROCES

Fra et code review, der ændrede alt, til en platform bygget til at holde.

Vi afklarer før vi udvikler, tester før vi lancerer og dokumenterer alt undervejs. Fem strukturerede faser, fra teknisk analyse til go-live, så intet bliver overladt til tilfældigheder, intet bliver forhastet, og du altid ved, hvor projektet står.

Discovery & afgrænsning

Inspirationsworkshop med Pravda, designoverdragelse fra Pravda, gennemgang af API-dokumentation, specifikation færdiggjort, backlog planlagt til 6 sprints, cloud-infrastruktur konfigureret og Figma-design låst.

Udvikling: Fase 1

3D-klode og metaball-kernen udviklet, sporing af fartøjer integreret med live flåde- og kontor-API, WordPress CMS udvidet med custom fields, grid-system og navigationsstruktur implementeret.

Udvikling: Fase 2

Alle interaktive funktioner færdigudviklet: cargo-materialesystem med shader-egenskaber pr. kemikalie, overgange mellem 3D-produktmodeller, kontor-pins, deep-linked URL-routing, specialudviklet cursor, Purpose-filmafspiller og integration til cookie-samtykke.

Test

Brugertest efterfulgt af kundetest. Cross-browser og cross-device QA på tværs af Chrome, Edge, Safari, Firefox, iOS og Android.

Go-live

Produktionsudrulning via GitLab CI/CD, konfiguration af DNS og URL’er, Matomo-analyse tilkoblet, cookie-samtykke verificeret på tværs af WordPress og SPA, samt rettelser efter lancering gennemført. Gik live den 28. april 2026.

ARKITEKTURBESLUTNINGER

Hvert teknisk valg formet af kravene til et live flådedashboard.

Tre beslutninger blev truffet, før den første linje kode blev skrevet. Hver af dem balancerede rå performance med redaktionel frihed, og hver af dem viste sin værdi.

React Three Fiber frem for standardframeworks

Designet krævede real-time 3D-rendering, fysikbaserede væskematerialer og flydende kameraanimation på tværs af en interaktiv klode. Ingen traditionelle frameworks, WordPress-temaer, statiske site generators eller headless CMS’er kunne levere det.

React Three Fiber var den eneste realistiske løsning: en produktionsklar React-binding til Three.js, som gjorde det muligt at bygge hele 3D-scenen som sammensatte komponenter, mens resten af brugerfladen blev udviklet i standard React.

Lokal server frem for S3 til 3D-assets

Performance-tests viste, at levering af 3D-assets, teksturer, HDRI-maps og modeller direkte fra applikationsserveren i Google Cloud var hurtigere end at hente dem fra en S3-bucket uden CDN.

S3-bucketen blev fuldt opsat og integreret i pipeline-flowet, men tilføjede infrastrukturkompleksitet uden nogen reel hastighedsgevinst. S3 bruges stadig til JSON-datafiler, som pushes via CI/CD-pipelinen.

Specialbygget cookie-bro frem for standardløsninger

Standardpluginet Real Cookie Banner kan ikke rendere inde i en React SPA, der kører som en undermappe. Det fungerer kun direkte i WordPress.

I stedet for at skifte samtykkeløsning kontaktede Webnorth pluginleverandøren (DevOwl) direkte og byggede en bro i tre lag: et specialbygget banner i React-appen, et WordPress-middleware-endpoint, der oversætter samtykkekald fra SPA’en, samt pluginets REST API, der synkroniserer status mellem de to systemer.

TEKNOLOGISTAK

Fra en 3D-renderingsmotor til et live flåde-API, teknologierne bag Purpose.

React Three Fiber + Three.js Kerneframework til 3D-rendering Driver kloden, metaball, grid, 3D-produktmodeller, partikeleffekter og alle kameraanimationer.
MeshTransmissionMaterial Fysikbaseret shader til glas og væsker Renderer metaball i alle materialetilstande, fra transparent ethanol til voksagtig styrenmonomer.
WordPress + ACF Pro CMS Udvidet med en dedikeret backendsektion til cargoindhold, kemikaliebeskrivelser, SEO-metadata og sideindstillinger, som eksponeres til SPA’en via REST API.
Microsoft Fabric GraphQL Datakilde til live flåde- og kontordata Fartøjspositioner, hastighed, tanktype, DWT og status autentificeres via Azure OAuth2 og opdateres hver time fra kundens datalake.
GitLab CI/CD Deploy pipeline Adskilte udviklings- og produktionsmiljøer med automatiske builds og deployment af assets til Google Cloud.

40+ fartøjer sporet live

Alle aktive fartøjer i flåden vises på 3D-kloden i realtid og opdateres hver time direkte fra kundens egen datalake, helt uden manuelle opdateringer.

7 kontorer

Alle 7 Uni-Tankers-kontorer fordelt på 6 lande er markeret på kloden. Hvert kontor kan udforskes direkte på websitet med adresse, lokal tid og kontaktoplysninger hentet automatisk via API’et.