Vászonra vetített szöveg

Feladat

Gyakran van szükség olyan szöveges információ elhelyezésére, ami nem része a 3D modelltérnek, a vászon mindig ugyanazon részén jelenik meg a színtér változásaitól függetlenül. Ilyen információ lehet például a használat módja, vagy a modellezés éppen aktuális állapotának leírása, játékprogramok esetén az energia, elért pontszám, stb., kijelzése.

Az ilyen jellegű információkat célszerű HTML elemek egymásra helyezésével megoldani (overlay - rávetítés), a tényleges Three.js modellezés helyett. Most áttekintjük, mik a szükséges lépések. Példaként a korábban már megismert árnyékhatást tesztelő példaprogramot (03_02_ThreeJsMaterialTester) vesszük elő. Teljes ablakos modellezést feltételezünk, de a pozicionálás módosításával meglévő vászonba történő munka esete is kezelhető.

CSS stílus definiálása a rávetített szöveges elemeknek

A stílus definíciókat elhelyezhetjük például a HTML fejlécben.

Kétféle szövegstílust definiálunk. Egyet a fejlécnek (#caption), egyet a hosszabb leírásnak (#info).

Az elemek pozicionálását (position) abszolútra vesszük, így lesznek egymásra helyezhetők.
Megadhatjuk a felső (top), alsó (bottom), bal (left) és jobb (right) szélektől a távolságot.
Megadhatjuk az elem szélességét (width) és magasságát (height) képpontban vagy a teljes méret százalékos értékében is.
Beállíthatjuk a szöveg igazítási módját (text-align) és színét (color).
Ha interaktív paneljeink is vannak (egér interakció a modelltérben, paraméterbeállító panel, stb.), nagyon fontos az elemek egymásra helyezési sorrendje! Az egér eseményt a legfelső fogja megkapni, akkor is, ha azt nem használja fel (pl. szövegmező). Az elemek sorrendjét a z-index határozza meg. A magasabb értékkel rendelkezők szerepelnek feljebb.
Beállíthatjuk a betűkészlet különféle jellemzőit is. Ezzel itt most nem foglalkozunk.

<head>
    <meta charset=utf-8>
    <title>Three.js Material Tester</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100% }
        #caption {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 50%;
            text-align: left;
            z-index: 100;
            display:block;
            color: yellow;
        }
        #info {
            position: absolute;
            top: 30px;
            left: 10px;
            width: 50%;
            text-align: left;
            z-index: 100;
            display:block;
            color: cyan;
            opacity: 1.0;
        }
    </style>
</head>

HTML szöveges elemek megadása

Létrehozunk két, szöveges információ megjelenítésére alkalmas elemet a fenti stílusok alkalmazásával. Mivel az infopanelnek azonosítót adtunk, ezt az elemet el tudjuk érni a JavaScript programunkból, így a tartalma dinamikusan változtatható.

<div id="caption">
    Anyag (Material) tesztelés.
</div>
<div id="info">
    <p id="infopanel">A színtér az egér segítségével körbeforgatható!<br/>
    Változtassunk a modellezés paraméterein!</p>
</div>

Szöveges rész módosítása a JavaScript programból

Lekérhetjük az azonosító alapján a DOM elem objektumot, aminek az innerHTML attribútumának új értéket adva a szöveg meg fog változni.

Amennyiben több helyről is szeretnénk módosítani a programból a szöveget, célszerű a DOM elemhez egy új globális változót létrehozni.

var infoPanel;

Az init() függvényünk elején adjunk neki értéket.

infoPanel = document.getElementById( 'infopanel' );

A szöveg módosításhoz célszerű egy új függvényt felvenni.

function setInfoPanelText( msg ) {
    infoPanel.innerHTML = msg;
}

A programunkból ezután egyszerűen változtathatjuk a megjelenítendő szöveget.

setInfoPanelText( 'Sötétszürke ambiens fény bekapcsolva.' );