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 (stats.min.js). Egy grafikont fogunk kapni az utolsó másodpercek eredményeivel.

Csomag forráskódja:

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

Példaprogram:

• ThreeJsDatGui.

Illesszük be a csomag forráskódját:

<script src="js/stats.min.js"></script>

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

var stats;

Másoljuk be a forráskódba az alábbi 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 már létező vászonhoz csatlakoztunk, és rendelkezésre áll a container objektum, ami ezt reprezentálja. Teljes ablakos megjelenítés esetén a bal oldali és a felső koordináta is '0px' lesz.
• 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 = container.offsetLeft + 'px';
        stats.domElement.style.top = container.offsetTop + 'px';
        document.body.appendChild( stats.domElement );
    }

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.
• A render() függvényben hívjuk meg a stats.update() függvényt.

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.

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

• A container.width helyett a window.innerWidth attribútumot használjuk. Hasonlóan a container.height helyett a window.innerHeight használandó. Célszerű az init() függvény elején kigyűjteni ezeket globális változókba, és ezt használni a pozicionáláskor:

HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;

• Ha a pozicioná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 pozicionálásával is!

Az egyszerűbb példaprogramok esetén szinte folyamatos, maximális 60 FPS körüli eredményt foguk látni.