HR Routeplanner

Een web app om de route naar een lokaal binnen de Hogeschool Rotterdam te zien. De app berekent via Google maps eerst de route naar een gebouw van de hogeschool. Vervolgens berekent het de kortste looproute binnen dat gebouw naar het lokaal toe.
Dit was het derde project tijdens de opleiding Informatica aan de Hogeschool Rotterdam.

Vaardigheden
TypescriptThree.jsBlenderAngularPythonHTMLSCSSScrum

Demonstratie Video

3D plattegronden

Ik heb bij dit project gewerkt aan de mogelijkheid om binnen een gebouw te kunnen navigeren. Mijn doel was om in een 3D model van een gebouw van de Hogeschool Rotterdam de route als een lijn te laten zien.

De plattegronden voor de gebouwen hebben we van de Faciliteiten en It (FIT) van de Hogeschool gekregen. Om deze plattegronden om te zetten naar een 3D model heb ik in python een addon voor Blender geschreven. Deze addon vind alle lokaal codes, en plaatst ze op de juiste coördinaten in het 3D model.

Vervolgens heb ik handmatig de 2D plattegrond in Blender overgetrokken. Met de python api van Blender was het mogelijk om dit overgetrokken 2D model om te zetten naar een 3D model.

In Blender heb ik ook het 'node netwerk' van 2 gebouwen uitgetekend. Dit zijn alle mogelijke loop routes door het gebouw heen. Met de python api wordt dit node netwerk geëxporteert naar een json bestand, wat later door de server gebruikt kan worden een route te berekenen.

Tijdens het testen van het 3D model in de browser bleek dat het genereren van schaduwen erg veel rekenkracht vereist. Daarom heb ik besloten om schaduwen van het 3D model vooraf in Blender te renderen, en als afbeelding te exporeteren.

3D in de browser

Het front-end van deze web app is in Angular en Typescript geschreven.

Om de 3D modellen in de browser te tonen heb ik gebruik gemaakt van de Three.js library. De 3D modellen zijn uit Blender naar gltf formaat geëxporteert. Dit formaat kan in Three.js geïmproteerd worden.

Door de knoppen 'forward' en 'backward' ingedrukt te houden verplaatst de blauwe bal zich over de route lijn.