Ostvarivanje 3D grafike u Internet preglednicima pomoću biblioteke Three.js

Sve do nedavno, nije postojalo puno web stranica koje koriste mogućnosti 3D grafike. Razlozi su razni, no zasigurno najveći razlog su bila ograničenja performansi mobilnih uređaja kao i zahtijevnost pisanja WebGL koda. U diplomskom radu opisana je glavna razlika između WebGLa i Three.jsa. Pošto je totalnim početnicima dosta teško započeti sa Three.jsom, opisane su tri različite metode uključivanja Three.js biblioteke u projekt. Pokrivene su glavne teme poput: geometrije, materijala, tekstura, svjetla i sjena. Prikazan je način na koji se može iz softvera Blender izvesti 3D model, te isto tako način na koji se može isti uvesti u Three.js projekt. Opisan je način na koji se 3D modeli mogu pomicati, skalirati i rotirati. Osim toga, opisani su i načini korištenja animacija, kamera, kontrola kamera te fizike. Za one koji žele saznati više, objašnjene su teme poput: punog zaslona i promjene veličine zaslona, Debug UIa, te su dodani savjeti za bolje performanse izvođenja web stranice.Opisana je izrada početne stranice i preostalih stranica u projektu. Osim toga, opisana je izrada, tekstura i izvoz 3D modela u softveru Blender.Until recently, there weren’t many websites that took advantage of 3D graphics capabilities. The reasons are various, but certainly the biggest reason was the limitation of mobile device performances as well as the complexity of writing WebGL code. This thesis describes the main difference between WebGL and Three.js. Since it is quite difficult for absolute beginners to get started with Three.js, three different methods of involving the Three.js library in the project are described. The main topics such as: geometry, materials, textures, light and shadows are covered. The method of exporting 3D objects and importing them to Three.js is described. It is shown how 3D models can be moved, scaled, and rotated. In addition, the ways of using animations, cameras, camera controls and physics are described. For those who want to learn more, topics such as: full screen and screen resizing, Debug UI, and tips for better website performance have been explained. The creation of the home page and the remaining pages in the project are described. In addition, the production, texture, and export of 3D models in Blender software are described