Aterimen värin valintasovelluksen toteutus Three.js:llä
Pöllänen, Irene (2021)
2021
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2021053112724
https://urn.fi/URN:NBN:fi:amk-2021053112724
Tiivistelmä
Tässä opinnäytteessä toteutettiin interaktiivinen aterimen värin valintasovellus Three.js:llä. Three.js on JavaScript 3D-kirjasto ja API (application programming interface), jolla voidaan luoda ja esittää 3D-tietokonegrafiikkaa selaimessa käyttäen WebGL:ää. Modernit selaimet tukevat WebGL:n käyttöä, joten käyttäjän ei tarvitse asentaa mitään ylimääräisiä selainlisäosia kirjaston käyttämiseksi. Three.js hyödyntää näytönohjainta, joten sillä on mahdollista visualisoida erityisen näyttävää ja sulavaa 3D-grafiikkaa selaimessa.
Työn lähtökohtana oli aiemmilla kursseilla Rhinoceroksella mallinnettu haarukkamalli. Malli muokattiin soveltuvaksi websovellukseen Blenderillä ja mallin ympärille luotiin websovellus, missä asiakas voi valita tuotteelle minkä tahansa värin RGB-väriavaruudesta. Tässä työssä hyödynnetyt ohjelmat ovat ilmaisia ja avoimen lähdekoodin tuotteita.
Opinnäytetyön tavoitteena oli omaksua Three.js:n perusteet ja luoda jokin lopullinen sovellus, joka visualisoisi dataa, jossa olisi jokin toiminto tai joka olisi visuaalisesti mielenkiintoinen. Työtä toteutettiin kokeilun ja yrittämisen kautta. Alun haasteena oli oppia kuinka Three.js:llä luodaan webgrafiikkaa. Tekniikka ei ollut aiemmin tuttu, joten työtä aloittaessa oli haastavaa päättää tarkkaan etukäteen mitä lopullinen lopputulos tulisi olemaan.
Lopulta onnistuttiin luomaan toiminnallinen sovellus, joka julkaistiin webpalvelimelle. Täten tässä opinnäytteessä luotu sovellus on testattu myös varsinaisessa julkaisuympäristössään internetsivuilla. Sovellusta voisi kehittää vielä eteenpäin. Haarukan liikerataa voisi rajoittaa ja käyttöliittymää voisi tehdä vielä selkeämmäksi. Nyt tavoite oli luoda toiminnallisuudet prototyyppitasolla siten, että ohjelma ei kaadu ja olisi visuaalisesti uskottava.
Työn lähtökohtana oli aiemmilla kursseilla Rhinoceroksella mallinnettu haarukkamalli. Malli muokattiin soveltuvaksi websovellukseen Blenderillä ja mallin ympärille luotiin websovellus, missä asiakas voi valita tuotteelle minkä tahansa värin RGB-väriavaruudesta. Tässä työssä hyödynnetyt ohjelmat ovat ilmaisia ja avoimen lähdekoodin tuotteita.
Opinnäytetyön tavoitteena oli omaksua Three.js:n perusteet ja luoda jokin lopullinen sovellus, joka visualisoisi dataa, jossa olisi jokin toiminto tai joka olisi visuaalisesti mielenkiintoinen. Työtä toteutettiin kokeilun ja yrittämisen kautta. Alun haasteena oli oppia kuinka Three.js:llä luodaan webgrafiikkaa. Tekniikka ei ollut aiemmin tuttu, joten työtä aloittaessa oli haastavaa päättää tarkkaan etukäteen mitä lopullinen lopputulos tulisi olemaan.
Lopulta onnistuttiin luomaan toiminnallinen sovellus, joka julkaistiin webpalvelimelle. Täten tässä opinnäytteessä luotu sovellus on testattu myös varsinaisessa julkaisuympäristössään internetsivuilla. Sovellusta voisi kehittää vielä eteenpäin. Haarukan liikerataa voisi rajoittaa ja käyttöliittymää voisi tehdä vielä selkeämmäksi. Nyt tavoite oli luoda toiminnallisuudet prototyyppitasolla siten, että ohjelma ei kaadu ja olisi visuaalisesti uskottava.