Rendering a 3D scene in a web application

Abstract

Opinnäytetyön tehtävänä oli generoida kolmiulotteinen representaatio merikontista, jonka sisällä on useita paperirullia. Tämä tehtiin verkkoselaimessa toimivaan merikontin optimointityökaluun paremman visualisoinnin vuoksi. Tutkin tätä varten CSS 3D Transforms, WebGL 1.0- sekä JavaScript-kirjastoja Three.js sekä Babylon.js. Kolmiulotteinen kuva saatiin aikaiseksi olemassa olevaan työkaluun.

Three.js ladattiin omalle laitteelle GitHub-sivuilta ja sitten otettiin käyttöön verkkosovelluksessa. Eri muuttujat luotiin kameralle, näkymälle sekä renderöijälle, ja ne otettiin käyttöön Three.js-kirjaston komentoja käyttäen. PlaneGeometry-objekteja käytettiin merikontin 3D-mallin luomiseen. Sekä EdgeGeometry- että CylinderGeometry- muotoja käytettiin funktion luontiin, joka luo ja siirtää nämä paperirullat oikeisiin paikkoihin käyttäen optimointityökalun olemassa olevia funktioita. Kameran ohjaaminen annettiin käyttäjälle käyttäen Three.js OrbitControls-funktiota, ja renderöintisilmukka tehtiin, koska OrbitControlsin käyttö vaatii sellaista. Näkymän kaikkien Three.js-objektien muistista tyhjentämiseen tarvittiin myös funktio, sillä kaikki käyttäjän lisäämät paperirullat eivät välttämättä mahdu yhteen merikonttiin.

Projekti saatiin valmiiksi ja 3D-näkymän luonti käyttäen Three.js-kirjastoa saavutettiin. Three.js-kirjaston mainion dokumentaation vuoksi lähes jokainen ohjelmointiin liittyvä ongelma ratkaistiin helposti. Projekti koetaan onnistuneeksi, sillä työkalu on ollut käytössä toimeksiantajalla opinnäytetyön kirjoituksen aikana ja antanut siitä enimmäkseen positiivista palautetta.

The objective of this thesis was to provide insight into the creation of 3D scenes inside web applications. For this purpose, a container optimization web application displaying a 3D representation of a container with varying numbers of paper reels inside of it was made. In order to support this, CSS 3D Transforms, WebGL and JavaScript 3D libraries Three.js and Babylon.js were studied, and the 3D scene was implemented into the existing web application.

In this study, Three.js was downloaded locally from its GitHub page and then loaded into the web application. Variables for the camera, scene and renderer objects were made and initialized using Three.js functions. PlaneGeometry objects were used in creating the 3D cargo container model. Both EdgeGeometry and CylinderGeometry shapes were used in creating a function that would place the paper reels in correct positions with the help of the application's placement optimization functions. Camera controls were given to the user using OrbitControls Three.js function, and a rendering loop was created because it was required for the OrbitControls functionality. Because all reels in a single order would not fit inside a single container, a function that would clear the scene from all Three.js objects were also created.

The creation of a suitable 3D scene was successfully achieved using Three.js. Because of its excellent documentation properties, most programming issues that arose during the study were easily solved. The commissioner successfully used the application giving mostly positive feedback.