Dokumentáció
A modellezés során számos alkalommal helyen van szükség szín beállításra. Ilyen esetekben a Three.js-ben a Color osztályt használhatjuk.
A színkódok interaktív kiválasztására például az alábbi honlap ad segítséget.
Three.js jegyzet Számítógépes grafika gyakorlathoz
Szín megadása
Szín megadása Three.js-ben
Az eddigi példáinkban nem használtunk megvilágítást, a tárgyaknak közvetlenül adtunk szín értéket. A szín megadása a fényforrásoknál és az anyagjellemzőknél továbbra is fontos marad, emiatt érdemes megnézni, milyen módokon tehetjük ezt meg.
A színt megadhatjuk az anyag (material) létrehozásakor egy 16-os számrendszerbeli számként. Az első két számjegy a vörös (R), a második kettő a zöld (G), az utolsó kettő pedig a kék (B) komponens intenzitását jelenti. 0 érték esetén az adott szín nem vesz részt a színképzésben, ff (=255 decimális számrendszerben) érték esetén maximális az intenzitása. Pl. 0x008000 egy középzöld színt jelent.
material = new THREE.MeshBasicMaterial( { color: 0x333388, wireframe: false } );
Dolgozhatunk úgy is, hogy a színt utólag, az anyag szín attribútumához rendeljük. Ekkor egy új szín objektumpéldányt kell készítenünk.
material = new THREE.MeshBasicMaterial( { wireframe: false } );
material.color = new THREE.Color( 0xff0000 );
Egy THREE.Color objektum számos beállító és lekérő függvénnyel rendelkezik. Ezek közül néhány fontosabb:
| set( value ) | Paraméterként átadott hexadecimális számérték beállítása új színként. |
| setHex( value ) | Numerikus hexa értékként kerül értelmezésre a paraméter, pl. "#008000". |
| setRGB( r, g, b) | RGB komponensek megadása. Az értékek 0 és 1 közöttiek! |
| setHSL( h, s, l ) | A HSL színtér szerinti definíció. Az értékek 0 és 1 közöttiek! |
| setStyle( style ) | CSS sztringként adhatjuk meg a színt, pl.: "rgb(255, 0, 0)", "#ff0000", "#f00", "red". |
| copy( color ) | A paraméterként átadott szín objektum értékét veszi át. |
| getHex() | Számként kapjuk meg a szín objektum értékét. |
| getHexString() | Hexa sztringkét adja vissza a színkódot. |
| getStyle() | CSS stílus sztringet kapunk vissza. |
| getHSL( target ) | HSL színtér szerinti értéket kapunk. Ha átadunk target objektumot, annak h, s, l attribútumait beállítja. |
További függvények állnak rendelkezésre színértékek összeadására, szorzására. Ezekkel itt nem foglalkozunk.