Creating room designer proof of concept with Three JS

Abstract

The objective of this thesis was to research the capabilities of the Three JS library to produce quick results suitable for developing a proof of concept level program in short time. An additional objective was to provide an overview of working with 3D environment and of the ThreeJS library and its features.

ThreeJS is a WebGL based library for presenting 3D graphics in a web browser environment and has been developed since 2010. Three JS was chosen for this project because it is a plain 3D graphics engine instead of being a full game engine, has comprehensive export and import options and it is known within the company already.

The client of this thesis wanted a quick proof of concept level application of a room designer which included only some basic functionalities such as drawing room outlines, generating a room from these outlines, adding movable air terminal devices to the ceiling and a simple air flow simulation. Due to tight schedule, the prototype was developed mostly in two weeks, and was developed using JavaScript, HTML and the ThreeJS library.

The project was very successful and the client was very satisfied with the results. All the feature requirements were fulfilled on time. ThreeJS proved to be suitable for this kind of prototyping as its basics are easy enough to learn quickly and able to produce results quickly. The project left much room for future development and there were also many ideas for that. Further areas for development include an accurate air flow simulation, more different product types and obstacle simulation.

Tämän opinnäytetyön tehtävä on tutkia Three JS -kirjaston kykyä tuottaa nopeita tuloksia, jotka sopivat prototyyppitason ohjelman kehitykseen lyhyessä ajassa. Lisäksi työ luo yleisnäkemyksen 3D-ympäristössä työskentelemisee, Three JS -kirjastoon ja sen ominaisuuksiin.

Three JS on WebGL:ään pohjautuva kirjasto 3D-grafiikan näyttämiseen web-selainympäristössä. Sitä on kehitetty vuodesta 2010 asti. Three JS valittiin tähän projektiin, koska se oli puhdas 3D-grafiikkamoottori toisin kuin monet sen kilpailijat, jotka ovat jo suoraan pelimoottoreita. Kirjasto oli myös jo etukäteen jossain määrin tunnettu yrityksen sisällä. Lisäksi Three JS tarjoaa kattavat tuonti- ja vientimahdollisuudet eri tiedostoformaatteihin.

Asiakas halusi nopean prototyyppi tason huonesuunnittelijaohjelman, joka sisälsi joitain perus ominaisuuksia kuten huoneen ääriviivojen piirtäminen, huoneen generointi ääriviivojen perusteella, päätelaitteiden lisääminen kattoon ja yksinkertaisen ilmavirta simulaation. Prototyyppi kehitettiin pääosin kahdessa viikossa käyttäen JavaScriptiä, HTML:ää ja Three JS -kirjastoa.

Projekti oli erittäinen onnistunut ja asiakas oli tyytyväinen saatuun lopputulokseen. Kaikki halutut ominaisuudet saatiin kehitettyä aikarajan puitteissa. Three JS osoittautui olevan sopiva kirjasto tämän tyyppiseen prototyypin kehitykseen, sillä sen peruskäyttö on riittävän helppo omaksua nopeasti ja se saa aikaseksi näkyviä tuloksia nopeasti. Projekti jätti paljon tilaa tulevaisuuden kehitykselle, johon myös oli paljon ideoita. Lisäominaisuudet voisivat olla esimerkiksi tarkka ilmavirtasimulaatio, uusia tuettuja tuoteluokkia tai estesimulaatio.