Bronto Duties -ohjelman kolmiulotteisen näkymän toteutus Three.js-kirjastolla

Abstract

Opinnäytetyössä kuvaillaan Bronto Skyliftin tilaaman Bronto Duties -ohjelman kolmiulotteisen näkymän eri osia ja rakennetta. Työn tavoitteena oli tehdä Bronto Skyliftin vaatimusten mukainen kolmiulotteinen näkymä nostolavojen ulottumien etäisyyksien havainnointiin. Työssä tuotettiin näkymä käyttäen nykyaikaisia selainpohjaisia teknologioita kuten Reactia, Reduxia ja Three.js:ää.

Kolmiulotteinen näkymä on rakenteeltaan päällepäin yksinkertainen, mutta sisäisesti monimutkainen. Rakenteen yksinkertaisuuden takia merkittävä osa näkymää hallinnoivasta logiikasta on kasautunut yhteen tiedostoon, mikä hankaloittaa ohjelman luettavuutta. Näkymää hallinnoiva logiikka rakentaa ohjelman käyttäjän syötteiden perusteella lukuisia eri näkymän osia, jotka Three.js-kirjasto piirtää käyttäjän havainnoitavaksi näkymäksi. Näkymän eri osiin kuuluvat esimerkiksi nostolava-ajoneuvo, ulottumakäyrä, rakennus ja mittaasteikko.

Opinnäytetyön tuloksena tehtiin sisäisesti monimutkainen, mutta tavoitteet saavuttava kolmiulotteinen näkymä, josta on hyötyä Bronto Skyliftille. Näkymän lopullisiin ominaisuuksiin kuuluu muun muassa kaksi kameraesitystä, mahdollisuus tutkia nostolavan ulottumakäyrää usealla eri asetuksella, säädettävän rakennuksen ja tuulimyllyn esitys sekä mahdollisuus tutkia ulottumakäyrän ja rakennuksen välistä leikkausta.

This thesis describes the implementation of a three-dimensional view in the Bronto Duties program. The aim of this thesis was to deliver a three-dimensional view for the purpose of viewing the reach and other qualities of an aerial platform as described by the client of the program, Bronto Skylift. The purpose of the thesis was to create the three-dimensional view using the latest web-based technologies, such as React, Redux and Three.js.

The three-dimensional view is comprised of multiple intertwined parts, which on the surface appear simple. However, internally they are complex and hard to handle. A significant portion of the logic that handles the three-dimensional view is all in the same file, which makes the program hard to develop for. During the program’s lifetime, the handling logic creates multiple objects, according to the program’s users input, which are then drawn on the three-dimensional view by the Three.js library. Objects drawn on the view include, but are not limited to, aerial platforms, outreaches, buildings and a scale.

The result of this thesis is a three-dimensional view that is according to the demands of the client, fulfilling the aim of the thesis. The final features of the program include, but are not limited to, two camera presentations, possibility of viewing multiple different outreach positions and settings, an adjustable building or windmill and a possibility to turn on intersections between the building and the outreach.