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

Questions
,
1

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

2

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()
}
2 Likes
3

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)