A jegyzethez videó bemutatók is tartoznak. Ezek az alábbi linken keresztül érhetők el:
Technikai háttér bemutatása:
- 00_01_Szggraf_Jegyzet_ThreeJs.mp4: A jegyzet URL címe, felépítése, használata. A threejs.org hivatalos honlap használatának bemutatása. (10:34 perc)
- 00_02_Szggraf_Peldatar_beuzemeles.mp4: A jegyzethez tartozó példatár letöltése. WebStorm letöltés, telepítés, új projekt létrehozás. Példatár programok új projektbe másolása. Első példaprogram futtatása. (9:00 perc)
- 00_03_Szggraf_WebStorm_hasznalat.mp4: WebStorm bemutatása, programozást segítő funkciók, nyomkövetés. (17:40 perc)
Hello Three.js!
- 01_01_ThreeJs_Hello.mkv: Első példaprogram felépítésének részletes bemutatása. (33:30 perc)
- 01_02_ThreeJs_Ures_fajlbol_felepitve.mp4: Üres HTML fáljból felépített Three.js program. (7:11 perc)
Objektumok és térbeli elhelyezésük
- 02_01_ThreeJs_2D_geometriak.mkv: 2D geometriák létrehozása. (13:41 perc)
- 02_02_ThreeJs_3D_geometriak.mkv: 3D geometriák létrehozása. (17:10 perc)
- 02_03_ThreeJs_Seged_geometriak.mkv: Segéd geometriák létrehozása. (13:16 perc)
- 02_04_ThreeJs_Objektum_pozicionalas.mkv: Objektumok térbeli elhelyezés attribútumokkal. (16:56 perc)
- 02_05_ThreeJs_Terbeli_osszegzo_megoldas.mp4: A fejezethez tartozó összegző feladat megoldása lépésről lépésre bemutatva. (15:47 perc)
Fények, anyagok, árnyékok
- 03_01_ThreeJs_Fenyek.mp4: Three.js fényforrások bemutatása. (25:31 perc)
- 03_02_ThreeJs_Anyagjellemzok.mp4: Three.js anyag objektumok bemutatása. (14:33) Figyelem! A Three.js r144 verzióban a MeshLambertMaterial működése a korábbi per-vertex-ről, per-fragment-re változott! A régi funkcionalitást a példák között található MeshGouraudMaterial használatával még elérhetjük.
- 03_03_ThreeJs_Arnyekok.mp4: Three.js árnyékolási lehetőségek bemutatása. (17:15 perc)
- 03_04_ThreeJs_Megvilagitas_osszegzo_feladat.mp4: A megvilágítás összegző feladat megoldása. (5:59 perc)
Saját geometriák és normálvektorok
- Three.js API változások miatt a korábbi videóanyag elavult!
Blender modellezés (Blender 3.8)
- 05_01_Blender_Alapok.mkv: Felhasználói felület felépítése, használata. Navigáció a modelltérben. 3D kurzor. Felszínhálók hozzáadása. Térbeli mozgatás, forgatás, skálázás. Felszínháló szerkesztése: pontok, élek, lapok kijelölése. Szerkesztő parancsok. (39:53 perc)
- 05_02_Blender_Modellezes_Peldak.mkv: Blender jegyzet példák megoldása. (21:14 perc)
- 05_03_Blender_Export_Import.mkv: Blender OBJ exportálás, OBJ importálás Three.js-ben. (38:53 perc)
Objektum hierarchia, geometriai transzformációk
- 06_01_ThreeJs_Objektum_hierarchia.mp4: Objektum hierarchia bemutatása. (12:52 perc)
- 06_02_ThreeJs_Object3D.mp4: Object3D használata. (11:49 perc)
- 06_03_ThreeJs_Tank_pelda.mp4: Tank példaprogram. (10:09 perc)
- 06_04_ThreeJs_Bolygo_pelda.mp4: Bolygómozgás példaprogram. (4:50 perc)
- 06_05_ThreeJs_Geometriai_trafo_feladatok.mp4: Geometriai transzformációhoz tartozó feladatok megoldási lehetőségeinek áttekintése. (7:26 perc)
Interakciók, kamerák
- 07_01_JS_Interakciok_szoveg_overlay.mp4: Billentyűzetfigyelés; egérkezelés; szöveg rávetítése a vászonra. (6:34 perc)
- 07_02_ThreeJs_Kamerak_interakciok.mp4: Perspektív és párhuzamos vetítés; kamera interakciók. (8:06 perc)
Textúrázás
- 08_01_ThreeJs_Texturazas.mp4: Külső képfájlból betöltött mintázat használata beépített geometriákon. (9:45 perc)
- 08_02_ThreeJs_Sajat_geometria_texturazasa.mp4: Saját geometriák textúrázása. Three.js API változások miatt a tartalma elavult! (6:15 perc)
- 08_03_ThreeJs_Canvas_textura.mp4: Vászon grafikával előállított mintázat használata textúrázáshoz. (4:01 perc)
Átlátszóság, multimaterial
- 09_01_ThreeJs_Atlatszosag.mp4: Átlátszóság használata. (2:59 perc)
- 09_02_ThreeJs_Atlatszo_texturazas.mp4: Átlászóság kombinálásása textúrázással. (4:30 perc)
- 09_03_ThreeJs_Multimaterial_teglatest.mp4: Multimaterial használat téglatest hat lapjára. (4:17 perc)
- 09_04_ThreeJs_Multimaterial_sajat_geometrian.mp4: Anyagjellemző beállítása saját geometriánk lapjaihoz egyenként. Three.js API változások miatt a tartalma elavult! (4:20 perc)
Blender anyagok és textúrázás
- 10_01_Blender_material_ThreeJs.mp4: Anyag létrehozása Blender-ben, és átviteli lehetőségei Three.js-be Wavefron OBJ formátumot használva. (29:23 perc)
- 10_02_Blender_cube_texture.mp4: Kocka lapjainak textúrázása dobókocka mintával. (15:40 perc)
- 10_03_Blender_sphere_texture.mp4: Gömb textúrázása Blender-ben. (8:09 perc)
- 10_04_Blender_Biliard_texture.mp4: Biliárdgolyó textúrázás gömbfelszín felosztással és kiterítéssel (Mark Seam + Unwrap). (10:18 perc)
Fejlettebb funkciók áttekintése
- 11_01_ThreeJs_Kod.mkv: Ködgenerálás. (10:18 perc)
- 11_02_ThreeJs_TextGeometry.mkv: 3D szöveg geometria használata. (9:33 perc)
- 11_03_ThreeJs_Fejlett_texturazas.mkv: Egyenetlen felszín (bump mapping), csillogási paraméter (specular mapping) textúrázással. (9:29 perc)
- 11_04_ThreeJs_Tween_animacio.mkv: Animált mozgások használata a tween.js függvénykönyvtár használatával. (20:37 perc)
Gyakori hibaforrások megoldása
- Errors_01_ThreeJs_Rejtett_eleresi_utak.mkv: Mit módosítsunk, ha nem szeretnénk a Three.js forrásfájlok eredeti mappaszerkezetét megtartani? (5:35 perc)
- Errors_02_Blender_Extra_vonalak.mkv: A Blender-ből exportált Wavefront OBJ fájlok beolvasása problémás Three.js-ben, amennyiben vonal geometria is kiírásra kerül. Ennek javítását mutatja be a videó. (6:19 perc)