Three.js jegyzet Számítógépes grafika gyakorlathoz
Pontfény
Használata
A szín (color) és színintenzitás (intensity) mellett további paramétereket is meg kell adnunk.
- A legfontosabb a fényforrás helye a térben (position).
- Az intensity paraméter értéke a fizikai távolságoktól függ, így optimális értéke nagyon változatos lehet. Az alapértelmezett 1.0 érték jó eséllyel túlságosan sötét eredményt ad. Próbáljunk százas, ezres, akár milliós értékekkel dolgozni!
- A fény hatása gyengül a maximális távolsághoz közeledve, a távolabbi objektumokat egyre kevésbé képes megvilágítani. A csökkenés mértékét a decay attribútummal szabályozhatjuk. Ennek fizikailag korrekt érték a 2, aminek a megváltoztatása nem javasolt.
- A distance attribútummal megadhatjuk, maximálisan milyen távolságra ér el a fény. Ha a távoli objektumokra már kicsi lenne a hatása, ne számoltassuk feleslegesen a GPU-t. Az alapértelmezett érték 0, ami azt jelenti, hogy nincs távolságkorlát. Ne változtassunk rajta.
- A fényforrást ki/be kapcsolhatjuk a visible logikai attribútummal.
- Az r73 verzió óta képes árnyékot is vetni. Ennek részleteit külön tárgyaljuk.
let pLight = new THREE.PointLight( 0x00ffff, 100 );
pLight.position.set( 0, 0, 15 );
scene.add( pLight );
Ne felejtsük el, hogy itt sem jó a MeshBasicMaterial!
Feladat
Módosítsuk az előző példaprogramot!
- Ambiens helyett pontfényt használjunk!
- Figyeljük meg, hogy az eredmény szebb lesz, a forgó kocka oldalai más színárnyalatot kapnak annak függvényében, milyen szögben érkezik rájuk a fény!
- Következő lépésként adjunk hozzá ambiens fényt is és vizsgáljuk meg a kettő együttes hatását!
- Ha az ambiens fény intenzitása magas, akkor el fogja nyomni a pontfényt!
- Állítsuk alacsonyabbra, pl. 0x002020 értékre!
- Próbáljuk ki a 0x800000 értékkel is!
- Forgassuk körbe a kamerát az objektum körül, és vizsgáljuk meg a hátsó lapok megjelenését!
- A programhoz vezérlőpanelt is adhatunk, amellyel a fenti paramétereket interaktívan módosíthatjuk.