Kako pomoću Three.js prikazati 3D objekte

Ovo je primjer HTML koda koji koristi Three.js za prikazivanje 3D objekta (kocke) u web pregledniku.

Objašnjenje:

  1. Učitavanje Three.js:
    • Uključujemo Three.js knjižnicu putem <script> taga koristeći CDN.
  2. Postavljanje Scene i Kamere:
    • Kreiramo scene (prostor u kojem se objekti renderiraju) i kamicu koja omogućava prikaz objekata u 3D prostoru.
  3. Renderer:
    • Renderer je odgovoran za crtanje scene. Koristimo WebGLRenderer koji koristi GPU za renderiranje, a postavljamo njegovu veličinu prema dimenzijama prozora preglednika.
  4. Kreiranje Kocke:
    • Kocka se kreira pomoću BoxGeometry koja stvara jednostavnu geometriju kocke. Kocki dodajemo crveni materijal s MeshBasicMaterial, koji je jednostavan materijal bez svjetla.
  5. Animacija:
    • Unutar funkcije animate(), kocka se rotira oko x i y osi, a zatim se scena renderira svakim pozivom requestAnimationFrame.
  6. 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.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)