How to enable FPS counter within the THREE.js web editor

I want to see the FPS of my project but THREEjs makes it unclear how to enable the FPS counter within the editor like most of the examples have enabled

You need to spend more time studying the documentation.

You need a JavaScript FPS meter like stats.js.

Add it to your dependencies with npm install --save stats.js

Import it and instantiate it:

import Stats from 'stats.js'

const stats = new Stats()
stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom)

Call it’s begin() and end() methods in the tick function

const tick = () =>
{
    stats.begin()

    // ...

    stats.end()
}

If you don’t mind losing one of your Toolbar Bookmarks.

Try stats bookmarklet.

Pros:

  • Works on any protocol
  • Self contained
  • Add/Remove from DOM
  • Use arrow key to move
  • Use “Z” key to scale up
  • Use “0” to reset MS counter

In order the key commands to work, the mouse must be hovering over the counter.

Stats.txt (3.0 KB)