Használat

Beépített Three.js objektumok használatakor hátránynak tűnhet, hogy a test minden lapja egyforma anyagjellemzővel jelenik meg. Ha például egy kockát textúrázott anyaggal látunk el, minden lapjára rákerül ugyanaz a mintázat. Ha más mintázatot, színt, átlátszóságot szeretnénk a lapoknak adni, készítsünk egy JavaScript tömböt, amelynek Material objektumok az elemei.

A beépített téglatest objektum fel van készítve a többszörös anyag kezelésére, ebben az esetben 6 darab anyag objektumot kell a listához adni, minden laphoz egyet.

Megjegyezzük, hogy korábbi Three.js verziókban a MultiMaterial objektum volt erre a célra használható, de eltávolításra került.

Példaprogram

A 09_03_ThreeJsTextureMultiMaterialTester példaprogram az átlátszó textúra és az anyagok tömbjének együttes használatát mutatja be.

Egy kocka két lapjára feszítünk olyan mintázatot, amelynek a középső részén egy kör alakú lyuk van, vagyis a kör alakú területen belül a képpontok átlátszósága 0, míg a többi helyen 1 értékű. Ezen keresztül láthatjuk a kocka belső részén elhelyezkedő sárga gömböt.

A többi lap átlátszatlan, sötétkék, kétoldali megjelenésű anyagot kap.

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'assets/texture/HoleTexture.png' );

var matArray = [];
matArray.push( new THREE.MeshPhongMaterial( { color: 0x000090, side: THREE.DoubleSide } ) );
matArray.push( new THREE.MeshPhongMaterial( { color: 0x000090, side: THREE.DoubleSide } ) );
matArray.push( new THREE.MeshPhongMaterial( { map: texture, transparent: true, opacity: 1.0, color: 0xffffff, side: THREE.DoubleSide } ) );
matArray.push( new THREE.MeshPhongMaterial( { color: 0x000090, side: THREE.DoubleSide } ) );
matArray.push( new THREE.MeshPhongMaterial( { map: texture, transparent: true, opacity: 1.0, color: 0xffffff, side: THREE.DoubleSide } ) );
matArray.push( new THREE.MeshPhongMaterial( { color: 0x000090, side: THREE.DoubleSide } ) );

var geometry = new THREE.BoxGeometry( 8, 8, 8 );
mesh = new THREE.Mesh( geometry, matArray );
scene.add( mesh );