Alle projekter
Interaktiv 3D (Three.js)

Pipe Trekker A-200: 3D-viewer

Webbaseret 3D-viewer i realtid til A-200 Pipe Crawler fra Pipe Trekker, bygget med Three.js over to uger på 3D College Danmark.

Rolle
3D-modellering, animation og webudvikling
Værktøjer
  • Three.js
  • Blender
Teknik
HTML / CSS / JavaScript
Format
Interaktiv, kører live i browseren
Interaktiv 3D, kører live i browseren Åbn i nyt vindue
Sådan bruger du demoen
  • Sænk og hæv armen
  • Vip kamerahovedet op og ned
  • Drej kamerahovedet 360°
  • Skift mellem faste kameravinkler
  • Træk for at dreje kameraet
  • Rul med musehjulet eller knib med to fingre for at zoome
  • Vis infopunkter, og hold musen over et punkt for at fremhæve delen
  • Nulstil sætter robotten og kameraet tilbage

Projektoversigt

Under mit 6. ophold på 3D College Danmark lavede jeg en webbaseret 3D-viewer i realtid til A-200 Pipe Crawler-dronen fra Pipe Trekker, et firma under Deep Trekker Inc. Projektet var et lille proof of concept og mit første forsøg på at kombinere 3D-modellering med interaktiv webudvikling.

Værktøjer og teknologier

Jeg brugte Three.js til 3D-renderingen og de interaktive kontroller sammen med almindelige webteknologier som HTML, CSS og JavaScript. Jeg fik også hjælp fra ChatGPT-5 til kodestruktur og debugging, hvilket gjorde den første udviklingsfase betydeligt hurtigere. Assistenten mistede dog nogle gange sammenhængen eller foreslog funktioner, der ikke passede til projektets omfang, så de senere faser krævede grundig gennemgang og manuel finjustering.

Refleksion

Projektet var langt fra perfekt, men det blev en værdifuld læringsoplevelse. De sidste dage af anden uge gik mest med finjustering, optimering af ydeevne og omfattende debugging. Trods udfordringerne fik jeg indsigt i, hvordan 3D-modellering, animation og webudvikling kan samles i én arbejdsgang, og hvordan AI kan understøtte den kreative og tekniske beslutningsproces uden at erstatte den.

Arbejdsgang

Projektet blev gennemført på to intensive uger. I den første uge fokuserede jeg på at modellere og animere Pipe Crawler-dronen samt optimere geometri og materialer til realtidsbrug i browseren. Den anden uge gik med at bygge websitet og implementere den JavaScript-logik, der driver vieweren og interaktionen.