Beumer
Interaktiv 3D-demo med BEUMER Group som eksempel: et transportanlæg med pakker, som du kan dreje, zoome og klikke på.
- Rolle
- 3D og webudvikling
- Værktøjer
Three.js
- Teknik
- WebGL / fysik
- Format
- Interaktiv, kører live i browseren
Om demoen
Demoen viser et transportanlæg til pakker i 3D. Fra et skråt tilførselsbånd falder papkasser ned på et hovedbånd, kører gennem en scannerport og falder for enden ned i en opsamlingsspand. Når en pakke passerer scanneren, skifter laseren fra rød til grøn. Det er min egen demo og et proof of concept i WebGL med BEUMER Group som eksempel. BEUMER Group har ikke bestilt den.
Min rolle
Jeg stod for 3D og webudvikling. Jeg byggede anlægget og pakkerne i kode med Three.js og lavede betjeningen. Teksturerne på pap, tape, forsendelsesetiketter og betongulv tegnede jeg også i koden i stedet for at bruge billedfiler.
Teknik
Demoen kører i browseren med WebGL og henter ca. 0,5 MB. Three.js tegner scenen, fysikmotoren cannon-es styrer pakkernes fald, og tween.js står for de korte animationer. Demoen indlæser ingen 3D-modeller eller eksterne data. Man drejer kameraet ved at trække og zoomer med musehjulet eller med to fingre. Et klik eller tryk på en pakke løfter den kort og giver den en rød kontur. Én knap stopper og starter motoren, en anden løfter pakkerne én ad gangen, og demoen kan også styres med tastaturet. Teksterne findes på dansk og engelsk.