Kas yra 3D žiniatinklyje

Naršyklė moka piešti ne tik tekstą ir paveikslėlius — ji moka piešti tikrą 3D tiesiai puslapyje. Už to slypi WebGL: žema, galinga sąsaja su vaizdo plokšte (GPU). Bet WebGL kalba yra varginanti — dešimtys eilučių vien trikampiui nupiešti.

Todėl naudosim Three.js — biblioteką, kuri apgaubia WebGL patogiomis sąvokomis: „scena", „kamera", „objektas", „šviesa". Vietoj šimtų eilučių GPU komandų rašai new THREE.Mesh(...).

Kelios pamatinės sąvokos:

• <canvas> — HTML elementas, į kurį Three.js piešia. Tai tavo 3D langas.
• Atvaizdavimo ciklas (render loop) — 3D nėra vienas paveikslas. Programa perpiešia sceną kadras po kadro (apie 60 kartų per sekundę), todėl objektai gali judėti ir suktis.
• 3D koordinatės — kiekvienas taškas turi tris skaičius: x (kairė/dešinė), y (žemyn/aukštyn), z (tolyn/artyn). Centras (0, 0, 0) — scenos vidurys.

Tavo projektas — Saulės sistema. Visą kursą statysi interaktyvią Saulės sistemą: sferos taps planetomis, centrinė šviesa — Saule, sukimasis aplink — orbitomis, tekstūros duos planetoms paviršių, o paspaudimas ant planetos parodys apie ją informaciją (raycasting). Kiekviena pamoka prideda po vieną tikrą sistemos savybę.

Šiandien mažesnis, bet privalomas pirmas žingsnis: įsitikinti, kad 3D konvejeris apskritai veikia — pastatyti tuščią, bet gyvą 3D drobę.