Ovo je primjer HTML koda koji koristi Three.js za prikazivanje 3D objekta (kocke) u web pregledniku.
Objašnjenje:
- Učitavanje Three.js:
- Uključujemo Three.js knjižnicu putem
<script>
taga koristeći CDN.
- Uključujemo Three.js knjižnicu putem
- Postavljanje Scene i Kamere:
- Kreiramo scene (prostor u kojem se objekti renderiraju) i kamicu koja omogućava prikaz objekata u 3D prostoru.
- Renderer:
- Renderer je odgovoran za crtanje scene. Koristimo
WebGLRenderer
koji koristi GPU za renderiranje, a postavljamo njegovu veličinu prema dimenzijama prozora preglednika.
- Renderer je odgovoran za crtanje scene. Koristimo
- Kreiranje Kocke:
- Kocka se kreira pomoću
BoxGeometry
koja stvara jednostavnu geometriju kocke. Kocki dodajemo crveni materijal sMeshBasicMaterial
, koji je jednostavan materijal bez svjetla.
- Kocka se kreira pomoću
- Animacija:
- Unutar funkcije
animate()
, kocka se rotira oko x i y osi, a zatim se scena renderira svakim pozivomrequestAnimationFrame
.
- Unutar funkcije
- Podesite Resizing:
- Na kraju, dodali smo slušatelja za promjenu veličine prozora tako da scena uvijek odgovara veličini preglednika.
Što ćeš vidjeti:
- Ovaj HTML prikazuje rotirajuću crvenu kocku u 3D prostoru.