• TextGeometry

A Three.js lehetőséget biztosít arra, hogy betűket 3D felszínhálóval modellezve szöveget helyezzünk el a színtérben. Ezek az objektumok ugyanúgy viselkednek, mint más geometriák (téglatest, gömb, stb.). Használati lépések az alábbiak.

A használni kívánt betűkészlet geometriai modelljét másoljuk a saját projektünk assets/fonts mappájába.

• Ilyen modelleket találunk a Three.js forrás examples/fonts mappájában, .json kiterjesztéssel. A magyar ékezetes betűket a gentilis és a droid nevűek jelenítik meg megfelelően.
• Előállíthatunk sajátot is megfelelő betűkészletből a Facetype.js szolgáltatással, ami a https://gero3.github.io/facetype.js/ címen elérhető.

Az egyszerűbb áttekinthetőség érdekében a szöveg geometria paramétereit gyűjtsük ki egy objektumba.

var data = {
    text : "Árvíztűrő",
    size : 5,
    height : 2,
    curveSegments : 12,
    bevelEnabled : false,
    bevelThickness : 1,
    bevelSize : 0.5
};

A betűkészlet geometria betöltése a textúrákéhoz hasonlóan betöltő objektummal történik.

A betöltés aszinkron módon megy, vagyis a program végrehajtsa folytatódik, mielőtt a betöltés megtörténne. Vigyáznunk kell, hogy a renderelésnél addig ne használjuk, amíg nem érhető el! Nagyobb méretű objektum esetén célszerű a betöltés menetét a felhasználónak a tudtára adni. Ezzel itt nem foglalkozunk!

var loader = new THREE.FontLoader();
loader.load( 'assets/fonts/gentilis_regular.typeface.json', function ( font ) {
  // Betöltés után végrehajtandó rész, paraméterként kapjuk a beolvasott font objektumot
} );

A betöltés utáni programrészben hozzuk létre a szöveg geometriát, definiáljuk az anyagot, és ezek segítségével a felszínhálót, amit hozzá is adunk a színtérhez. Amennyiben már van létező szöveg objektum, elegendő a geometriáját lecserélni az újra. A kód feltételezi, hogy a mesh változót globálisként már korábban definiáltuk!

var geometry = new THREE.TextGeometry( data.text, {
    font: font,
    size: data.size,
    height: data.height,
    curveSegments: data.curveSegments,
    bevelEnabled: data.bevelEnabled,
    bevelThickness: data.bevelThickness,
    bevelSize: data.bevelSize
} );
geometry.center();

if( !mesh ) {
    // Ha még nem volt mesh létrehozás, készítsünk egyet.
    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xe0e0a0, wireframe: false } );
    mesh = new THREE.Mesh( geometry, textMaterial );
    scene.add( mesh );
} else {
    // Ha már volt korábbi mesh, akkor elég a geometriát lecserélni.
    mesh.geometry.dispose();
    mesh.geometry = geometry;
}