Alle projekter
Interaktiv 3D (Three.js)

KBH Tester

Interaktiv 3D-bymodel af området omkring Rådhuspladsen i København, bygget på OpenStreetMap-data.

Rolle
3D og webudvikling
Værktøjer
  • Three.js
  • OpenStreetMap (kortdata)
Format
Interaktiv, kører live i browseren
Interaktiv 3D, kører live i browseren Åbn i nyt vindue
Sådan bruger du demoen
  • Træk for at dreje kameraet
  • Rul med musehjulet for at zoome
  • Knib med to fingre for at zoome
  • På computer: hold musen over en fremhævet bygning for at se navnet
  • Klik eller tryk på en fremhævet bygning for at flyve derhen og se dens data
  • Tastatur: Tab går gennem de fremhævede bygninger, Enter viser data, piletaster drejer, + og - zoomer, Esc lukker panelet, og Esc og derefter Tab forlader kortet

Om demoen

Demoen viser et digitalt læringskoncept: en interaktiv 3D-model af området omkring Rådhuspladsen i København. Man vælger en fremhævet bygning og ser dens data, fx adresse, bygningstype, etager og åbningstider, sammen med læringsmål som "Kortlægge lokale data" og "Forstå bygningens funktion". I det færdige koncept starter et undervisningsforløb om bygningen herfra. Forløbet er ikke en del af demoen.

Min rolle

Jeg stod for 3D og webudvikling. Jeg byggede byen i Three.js ud fra OpenStreetMap-data: bygningerne rejses ud fra deres omrids og højde eller antal etager, og veje, pladser, parker, vand, træer og springvand kommer fra samme kilde. Rådhustårnet med urskiver byggede jeg separat i koden. For ni kendte bygninger, bl.a. Københavns Rådhus, Palace Hotel og Nationalmuseet, tilføjede jeg opførelsesår, arkitekt og historisk status.

Teknik

Demoen kører i browseren med Three.js (WebGL). Bydata er to udtræk fra OpenStreetMap, senest opdateret i september 2026, som ligger på sitet. Demoen henter ca. 0,7 MB. Man drejer kameraet ved at trække og zoomer med musehjulet eller med to fingre. Et klik eller tryk på en fremhævet bygning flytter kameraet derhen og åbner dens data. Demoen kan også betjenes med tastaturet og vises på dansk eller engelsk.