MULTIMEDIJALNI SISTEMI

Vežbe

Predmetni profesor: prof. Dr Dragan Cvetković

Predmetni asistent: Nikola Savnaović, master

Kontakt: nsavanovic@singidunum.ac.rs
Three.js
Three.js je jedan od najpopularnijih JavaScript framework-a za
prikazivanje 3D sadržaja na vebu

Kroz njega je moguće prikazati modele, igrice, muziku, video, različite

vizuelizacije, kao i sve drugo što se tiče nauke (medicina, biologija itd.)

Odličnu optimiziaciju ima za pametne telefone, što mu daje jedan veliki

plus
Three.js – šta radimo?
Svaku sekciju generalno delimo u nekoliko poglavlja, a obuhvatićemo
sledeće stavke:

• fundamentalni koncept

• Responsive dizajn

• Korišćenje ES6 modula, podrazumevajući osnove JavaScript-a

• ES7 – možda?
Three.js – šta radimo?
Callbacks (funkcije)

Three.js - postavljanje okruženja

Učitavanje OBJ fajlova, dodavanje pozadine ili Skybox-a

Crtanje transparent objekata

Višestruki CANVAS, višestruke scene

Pomeranje OBJEKATA mišem

Three.js – ciljevi?
Osnovni interaktivni 3D modeli

Pravljenje geometrijskih tela koja imaju mogućnost rotacija

Interaktivnost

Učitavanje kompleksnih modela

Anaglyph 3D

Realistični modeli
Three.js i WebGL
WebGL je API za povezivanje pretraživača i grafičke kartice, na taj način
koristimo više snage za obradu i procesuiranje grafike

Kako koristiti ovu mogućnost?

- tradicionalno, povezivanje ovakve mogućnosti može da se koristi na
bilo koji način, ali kako dokumentacija sugeriše - three.js se generalno
koristi za prikazivanje 3D grafike, pa nije preporuka da se drugačije
prikazuje sadržaj

WebGL jedanko je dobar za prikazivanje 2D grafike!

Three.js – kako da počnemo?
Pre svega, da li možemo da koristimo Webgl; Link: caniuse.com

Link gde se nalazi JS bibioteka za pravljenje 2D i 3D grafike:

https://threejs.org/
Three.js – kako da počnemo?
Link: https://threejs.org/

Preuzmemo celu biblioteku three.js-master; otpakujemo arhiviran folder

Three.js – kako da počnemo?
Nakon otpakivanja foldera, pravimo naš folder Vezbe-01 u kome ćemo
čuvati projekat i unutar njega pravimo JS folder iz kog ćemo povlačiti sve
Three.js biblioteke.
Iz originalnog foldera build gde se nalazi čitava three.js biblioteka
kopiramo tri skript fajla u folder Vežbe-01/JS
Three.js – kako da počnemo?
Napravimo html strukturu i pozivamo JS
Three.js – kako da počnemo?
Pravimo standardnu HTML5 strukturu (sa svim deklaracijama) i pozivamo
JS
Da bismo uopšte bilo šta mogli da prikažemo, potrebne su nam tri stvari
1. Scena (scene)
2. Kamera (camera)
3. Renderer (render scene sa kamerom!)

Dobijamo clipping plane

- Sve što je iza ne vidimo
- Sve što je blizu vidimo

Generalno, poenta je da nećemo da radimo rendering za nešto što je

daleko
Three.js – kako da počnemo?
<script>
var scene = new THREE.Scene( );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / wind
ow.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( );
…
</script>

Dobijamo clipping plane

- Sve što je iza ne vidimo
- Sve što je blizu vidimo

Generalno, nećemo da radimo rendering za nešto što je daleko već ćemo

taj deo obrađivati kada mu se približimo – čuvamo resurse!
Three.js – kako da počnemo? (Zadatak 1)
Three.js – Geometrija (Zadatak 1)
Potrebno je da napravimo promenljivu za definisanje
geometrije (shape)
BoxGeometry(x, y, z); - ppotrebno je definisati veličine za
sve ose:
BoxGeometry(1, 1, 1);

Pravimo materijal, boju, dajemo sliku ili teksturu

preko tela
MeshBasicMaterial({ color: hex verdnost, wireframe:
stavljamo true ili false});
Mesh (geometrija, materijal)
Add (cube / ili šta smo već definisali)

Potrebno je i da pomerimo poziciju da bismo celu

videli kupu (u našem slučaju):
camera.postion.z = 25;
Three.js – Geometrija (Zadatak 1)
Three.js – Geometrija (Zadatak 1)
Three.js – Renderovanje – viewport (Zadatak 2)
Problemi koji nam se javljaju prilikom renderovanja scene je resize
pretraživača

Na primer: ukoliko pokrenemo render „na pola ekrana“ a zatim

povećamo pretraživač preko celog prozora, dobićemo belu pozadinu jer
taj deo uopšte nije renderovan
Three.js – Kontrole (Zadatak 3)
Na three.js potrebno je da nadjemo u misc bibliotekama „pointerlock“

Bitno je da iz preuzetog fajla three.js-master.zip preuzmemo kontrole

Kopirati sledeći JS sadržaj iz three.js-master.zip u okruženje gde se

nalazi naš JS folder

Iz foldera: examples -> js -> controls -> izaberemo kontrolu

kopiramo u JS folder našeg projekta, iz koga pokrećemo naš index.html
Three.js – Kontrole (Zadatak 3)
Nakon što smo iskopirali fajl, potrebno je da ga uključimo u projekat:
<script src="js/OrbitControls.js"></script>

Potrebno je i da uključimo čitanje iz DOM-a:

controls = new THREE.OrbitControls( camera, renderer.domElement );

Za potpunu funkcionalnost potrebno je isključiti rotaciju x i y ose

cube.rotation
Three.js – Učitavanje tekstura na geometriju
(Zadatak 4 - tekstura)
- BoxGeometry
- Postavljamo texture na prednju i unutrašnju stranu Box-a
Three.js – Učitavanje tekstura na geometriju
(Zadatak 4 - tekstura)
Definišemo boju umesto slike

Neku sliku možemo da vidimo tek kada pristupimo „kutiji“ i da je vidimo

sa zadnje strane, neke slike možemo da vidimo samo sa „prednje
strane“
Three.js – Učitavanje tekstura na geometriju
(Zadatak 4 - tekstura)
Definišemo svaku stranicu za sebe – da li je doubleSide, frontSide ili
backSide
 VAŽNO
Ova prezentacija je nekomercijalna.
Slajdovi mogu da sadrže materijale preuzete sa Interneta, stručne i naučne građe,
koji su zaštićeni Zakonom o autorskim i srodnim pravima. Ova prezentacija se
može koristiti samo privremeno tokom usmenog izlaganja nastavnika u cilju
informisanja i upućivanja studenata na dalji stručni, istraživački i naučni rad i u
druge svrhe se ne sme koristiti.

Član 44 - Dozvoljeno je bez dozvole autora i bez plaćanja autorske naknade za

nekomercijalne svrhe nastave:
(1) javno izvođenje ili predstavljanje objavljenih dela u obliku neposrednog poučavanja
na nastavi;
- ZAKON O AUTORSKOM I SRODNIM PRAVIMA ("Sl. glasnik RS", br. 104/2009 i
99/2011)
Hvala na pažnji

Pitanja?