Как добавить Stats. js на сайт Gatsby, используя React-three-fiber?

Question

Я строю сайт Gatsby и хочу визуализировать на нем 3D-объекты, используя react-three-fiber. Я пытаюсь добавить в него статистику. js, просто чтобы отслеживать (и понимать, как это работает), как это делают большинство простых проектов. js.

• Я пытался использовать react-stats, но, похоже, устарел: последнее обновление 5 лет go. В проблемах, которые я обнаружил «Несовместимо с React 16», и хотя это, кажется, исправлено, ошибка «Необходимо импортировать проптипы» продолжает появляться.
• Я пробовал с react-canvas-stats, и после сражаясь в течение пары часов, я не могу обойти боссовую ошибку "TypeError: target is not constructor" из createInstance в node_modules/react-three-fiber/web.js:183. По моему опыту я, вероятно, не должен связываться с какими-либо файлами в node_modules.

Я не уверен, что использование пакета - лучшая идея (или если есть лучший пакет, который я не мог бы не могу найти), или если я попытаюсь добавить stats.js из исходного репо (абсолютно не знаю, с чего начать). Или, если вообще бессмысленно добавлять stats.js, и я должен сделать что-то совершенно другое. Или, если есть действительно очевидное решение, которое я упускаю полностью!

В любом случае, все ответы приветствуются!

Answer 1

вы можете сделать свой собственный, этот для необработанных fps: https://codesandbox.io/s/r3f-gltf-useloader-pvriu средний fps немного сложнее, но не так много.

вы также можете использовать обычные три js статистика, если вам нравится https://codesandbox.io/s/r3f-gltf-useloader-29sp2

Я добавлю это сегодня в drei: https://github.com/react-spring/drei

edit:

он есть, вы можете импортировать {Stats} из 'drei' и вставить его в сцену.

Answer 2

Взгляните на response-fps-stats . Сделал работу за меня.

Если вы хотите использовать fps только для целей разработки, вы можете использовать встроенный Chrome Devtools FPS Meter .