How to add Stats.js to a Gatsby site using React-three-fiber?

Question

I am building a Gatsby site and want to render 3D objects in it using react-three-fiber. I'm trying to add Stats.js to it, just to monitor (and to understand how it works), like most plain three.js projects do.

• I tried using react-stats, but it seems to be outdated: last updated 5 years ago. In the issues I found "Not compatible with React 16", and even though it seems to be fixed, the error "Proptypes need to be imported" keeps popping up.
• I tried with react-canvas-stats, and after battling for a couple hours, I can't get past the boss error "TypeError: target is not a constructor" coming from createInstance in node_modules/react-three-fiber/web.js:183. In my experience I probably shouldn't mess with any files in the node_modules.

I'm not sure if using a package is the best idea (or if there is a better package I couldn't find it), or if I should try to add stats.js from the original repo (absolutely no idea where to start with that). Or if it's meaningless to add stats.js in the first place and I should do something completely different. Or if there's a really obvious solution I'm missing completely!

In any case, all answers are appreciated!

Answer 1

you could make your own, this one is for raw fps: https://codesandbox.io/s/r3f-gltf-useloader-pvriu average fps is a little more involved but not that much.

you can also use plain threejs stats if you like https://codesandbox.io/s/r3f-gltf-useloader-29sp2

i'll add this to drei today: https://github.com/react-spring/drei

edit:

it's in, you can import { Stats } from 'drei' and plaster it into the scene.

Answer 2

Take a look at react-fps-stats. Did the job for me.

If you only want fps for development purposes, you can consider using the built in Chrome Devtools FPS Meter.