A MeshLambertMaterial esetén a síkidomok belső képpontjaiban értékelődnek ki a megvilágítási egyenletek, amelyek figyelembe veszik a fény színjellemzői és az anyag tulajdonsága mellett a fénysugár beesési szögét a felszín adott pontjában. A képpontban érvényes normálvektor a csúcspontokhoz rendelt normálvektorok távolságtól való interpoláltjaként áll elő. Ez a jelenlegi beépített lehetőség a Three.js-ben.

Használati példa

material = new THREE.MeshLambertMaterial( { color: 0x00c000 } );

További lehetőségek

• Az anyaghoz a szín (color) mellett rendelhetünk ambient néven egy másik színt is. Ez a szín a globális ambiens fénnyel lép kölcsönhatásba, majd elegyítésre kerül a fény-color páros által meghatározott színnel.
• Az emissive segítségével az objektumnak saját fény színt állíthatunk be. Ez nem lesz önálló fényforrás, de közrejátszik az objektum végleges színének kialakításában.

Dokumentáció interaktív példával

• MeshLambertMaterial

A MeshGouraudMaterial esetén a síkidomok csúcspontjaiban értékelődnek ki a megvilágítási egyenletek, amelyek figyelembe veszik a fény színjellemzői és az anyag tulajdonsága mellett a fénysugár beesési szögét a felszín adott pontjában. A síkidomok belső pontjai a csúcspont megvilágítással kialakult színeinek interpolációjával állnak elő. Ez gyors megjelenítést tesz lehetővé, de pl. reflektorfény esetén nagyon csúnya eredményt adhat!

A hivatalos Three.js magban már nem szerepel, külső kódként használhatjuk!

Használati példa

Át kell másolnunk a Three.js példakódok közül a MeshGouraudMaterial.js fájlt a projektünkbe. Ezt a js/examples/jsm/material mappában találjuk.

Az importmap szekcióban meg kell adnunk ezt a fájlt.

<script type="importmap">
{
    "imports": {
        "three": "./js/build/three.module.js",
        "MeshGouraudMaterial": "./js/examples/jsm/materials/MeshGouraudMaterial.js",
    }
}
</script>

Be kell importálnunk.

import { MeshGouraudMaterial } from 'MeshGouraudMaterial';

Ezután létrehozhatjuk az objektumot a programunkban.

material = new THREE.MeshGouraudMaterial( { color: 0x00c000 } );

További lehetőségek

• Megyezenek a MeshLambertMaterial lehetőségeivel.