A fejlesztői munkát segítheti, ha vizuálisan kijelezzük a modellezés sebességét, vagyis hány képkocka rajzolása történik meg 1 másodperc alatt. Erre külső JavaScript kódot használhatunk (js/examples/jsm/stats.module.js). Egy grafikont fogunk kapni az utolsó időszak eredményeivel.

Csomag forráskódja:

• https://github.com/mrdoob/stats.js/

Példaprogram:

• 12_01_ThreeJsDatGui

Importmap definíció:

<script type="importmap">
{
    "imports": {
        "stats": "./js/examples/jsm/libs/stats.module.js"
    }
}

Importáljuk a modult:

import Stats from 'stats';

Hozzunk létre egy globális változót, amely az objektumpéldányt fogja tárolni:

let stats;
let OFFSETLEFT, OFFSETTOP;

Másoljuk be a forráskódba az alábbi addStatsObject() függvényt, amely a DOM-hoz adja az objektumot és a vászon bal felső sarkába pozicionálja.

• A kódrészlet feltételezi, hogy előzetesen lekértük a vászon terület pozícióját és méretét az OFFSETLEFT és OFFSETTOP globális változókba. Ha a vászon terület szélességére és magasságára is szükségünk van a pozícionáláskor, akkor célszerű a WIDTH és HEIGHT globális változók használata.
• Teljes ablakos megjelenítés esetén a bal oldali és a felső koordináta is '0px' lesz. (Részletek a következő blokkban.)
• Természetesen más helyre is helyezhetjük a vezérlőt. Ha jobb oldalra szeretnénk helyezni, akkor a style.left helyett a style.right attribútumot is használhatjuk. Hasonlóan, a style.bottom az alulról való elhelyezéshez használható a style.top helyett. Pl. teljesen a jobb oldalra helyezhetjük (teljes ablakos modellezésnél célszerű így használni):
  • gui.domElement.style.right = '0px';
• Természetesen tetszőleges más helyre is pozicionálhatjuk az objektumot. Ne felejtsük el, hogy a koordinátákat sztringként, a 'px' utótagot hozzáadva kell a stílus attribútumnak átadni!
• A setMode() függvénnyel megadhatjuk, hogy milyen információt jelenítsen meg a panel.
  • 0: FPS
  • 1: Ezredmásodperc
  • 2: Memóriahasználat
  • 3, vagy annál nagyobb érték: testreszabható tartalom.

function addStatsObject() {
    stats = new Stats();
    stats.setMode(0);

    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = OFFSETLEFT + 'px';
    stats.domElement.style.top = OFFSETTOP + 'px';
    document.body.appendChild( stats.domElement );
}

Az init() függvényben állítsuk be a globális változókat.

container = document.getElementById( 'myCanvas' );
WIDTH = container.clientWidth;
HEIGHT = container.clientHeight;
OFFSETLEFT = container.offsetLeft;
OFFSETTOP = container.offsetTop;

Szükséges függvényhívások:

• Az init() függvényben hívjuk meg az imént bemásolt addStatsObject() függvényünket.
• Az animate() függvényben hívjuk meg a stats.update() függvényt.

A következőkre figyeljünk, ha teljes ablakos modellezéshez csatlakoztatjuk a panelt.

Az init() függvény elején az alábbi módon adjunk értéket a globális változóknak:

WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
OFFSETLEFT = 0;
OFFSETTOP = 0;

Ha a pozícionáláskor használjuk az ablak szélesség és/vagy magasság értékeit, ne felejtsük el az ablak méretváltozásait lekövetni! Vagyis a handleWindowResize() függvényt egészítsük ki a panel pozícionálásával is!

Az alábbi dolgokra figyeljünk a panel használatakor.

• Ha bal egérgombbal kattintunk a panelen, válthatunk a megjelenő adattípusok között.
• Ez akkor működik, ha nem takarja el a panelt más HTML elem. Ezt kontrollálhatjuk a zIndex attribútummal.
• Ha teljes ablakos módban modellezünk és a panel pozicionálásához használjuk az ablak szélességét és/vagy magasságát, ne felejtsük el az ablak méretváltozásait követni! Vagyis a handleWindowResize() függvényt egészítsük ki a panel pozicionálásával is.

Az egyszerűbb példaprogramok esetén szinte folyamatos, a rendszer által biztosított maximális FPS körüli eredményt foguk látni.