Skip navigation

Átlátszóság

Átlátszó anyag attribútumok

Átlátszó objektumok modellezéséhez az alábbi Material attribútumokat kell beállítani.

  • transparent: Logikai érték, átlátszó-e az anyag? Alapértelmezésként false az értéke.
  • opacity: Az átlátszóság mértéke. 1.0 érték esetén teljesen átlátszatlan, 0.0 esetén pedig teljesen átlátszó, nem is jelenik meg a tárgy. A kettő között a növekvő érték az egyre kevésbé átlátszóságot jelenti.

Átlátszó objektumok esetén célszerű lehet a lapok mindkét oldalának megjelenítését bekapcsolni a side attribútum THREE.DoubleSide értékre állításával.

Használati példa

let box1Geometry = new THREE.BoxGeometry( 3, 3, 3 );
let box1Material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
box1Material.transparent = true;
box1Material.opacity = 0.7;
box1Material.side = THREE.DoubleSide;
let box1Mesh = new THREE.Mesh( box1Geometry, box1Material );
scene.add( box1Mesh );

Példaprogram

A 09_01_ThreeJsOpacityTester példaprogram három téglatestet modellez. A vörös a kék színű belsejében helyezkedik el, mindkettő átlátszó. A mögöttük lévő fehér fal nem átlátszó.

  • Figyeljük meg, hogy a vörös és a kék kockán keresztül látjuk a hátsó falrészt.
  • Ha közelebb zoom-olunk a kék kocka belső részébe, akkor a kék kocka lapjai eltűnnek. Ennek oka, hogy a hátsó lapok alapértelmezésként nem jelennek meg. Állítsuk át kétoldalas megjelenítésre és vizsgáljuk meg a hatását!

Átlászóság működése (kiegészítő anyag)

Megjegyzés

Az átlátszóság modellezése a Three.js-ben nem a fizikai törvényszerűségek modellezésén alapul, hanem egy nagyon egyszerű közelítő trükköt alkalmaznak. Ennek lényege, hogy az átlátszó objekum színének képpufferbe másolásakor nem egyszerű felülírás történik, hanem a képpuffer adott pozícióján lévő színértékkel történő elegyítés, súlyozott összeg számítás. A súlyok meghatározásához veszik figyelembe az általunk megadott átlátszósági értéket. Ez viszont az is jelenti, hogy a képpufer adott pozíciójáa utoljára kerülő szín, nagyobb súllyal szerepelhet, mint a korábban bekerültek.

A valóságot jobban közelítő eredményhez az alábbi modellezési lépések javasoltak:

  • Először modellezük azokat a háromszögeket, amelyek teljesen átlátszatlanok. A szín mellett a mélység pufferbe bekerül az adott képpont távolsága a kamerától, ami a láthatósági tesztnél használatos.
  • Ezután állítsuk csak olvashatóra a mélységpuffert, és modellezük az átlátszó háromszögeket. Ha megoldható, haladjunk a távolabbiaktól a közelebbiek felé.

A Three.js használata esetén ezzel nem kell törődnünk, ezen lépések megvalósítása a Three.js feladata.