React Three Fiber — это мощная библиотека, которая позволяет разработчикам создавать 3D- и VR-опыты с помощью React. При работе со сложными сценами важно обеспечить оптимальную производительность. Один из способов мониторинга производительности — отображение количества кадров в секунду (FPS). В этой статье мы рассмотрим различные методы отображения количества FPS в React Three Fiber, а также примеры кода.

Метод 1: использование Stats.js

Stats.js – популярная библиотека для мониторинга FPS, использования памяти и производительности рендеринга. Он обеспечивает простой способ отображения FPS в React Three Fiber.

Сначала установите Stats.js с помощью npm или Yarn:

npm install stats.js

Затем импортируйте Stats.js и добавьте его в свой компонент React:

import React, { useRef } from 'react';
import { useFrame } from 'react-three-fiber';
import Stats from 'stats.js';
const MyComponent = () => {
  const statsRef = useRef();
  useFrame(() => {
    statsRef.current.update();
  });
  return (
    <>
      <Stats ref={statsRef} />
      {/* Your 3D scene components */}
    </>
  );
};
export default MyComponent;

Метод 2: собственный счетчик FPS

Если вы предпочитаете более индивидуальный подход, вы можете создать свой собственный счетчик FPS, используя состояние React и API requestAnimationFrame.

Вот пример:

import React, { useState, useEffect } from 'react';
import { useFrame } from 'react-three-fiber';
const MyComponent = () => {
  const [fps, setFps] = useState(0);
  let lastTime = Date.now();
  let frames = 0;
  useEffect(() => {
    const frameId = requestAnimationFrame(update);
    return () => {
      cancelAnimationFrame(frameId);
    };
  }, []);
  useFrame(() => {
    frames++;
  });
  const update = () => {
    const currentTime = Date.now();
    const delta = currentTime - lastTime;
    if (delta > 1000) {
      setFps(Math.round((frames * 1000) / delta));
      frames = 0;
      lastTime = currentTime;
    }
    requestAnimationFrame(update);
  };
  return (
    <>
      <div>FPS: {fps}</div>
      {/* Your 3D scene components */}
    </>
  );
};
export default MyComponent;

Метод 3: Инструмент разработчика React Performance

Если вы хотите проанализировать более подробные показатели производительности, помимо FPS, вы можете использовать расширение React Performance Devtool. Он предоставляет информацию о времени рендеринга компонентов, повторных рендерингах и многом другом.

Чтобы использовать инструмент разработчика React Performance, выполните следующие действия:

1. Установите расширение в свой браузер (доступно для Chrome и Firefox).
2. Импортируйте пакет react-perf-devtool:

npm install react-perf-devtool

1. Добавьте в свой код следующую строку:

import 'react-perf-devtool';

1. Откройте расширение React Performance Devtool в инструментах разработчика вашего браузера, чтобы просмотреть показатели производительности.

Отслеживание количества FPS имеет решающее значение при оптимизации производительности в приложениях React Three Fiber. В этой статье мы рассмотрели три метода отображения количества FPS: использование Stats.js, создание собственного счетчика FPS и использование расширения React Performance Devtool. Выберите метод, который лучше всего соответствует вашим потребностям, и улучшите производительность своих проектов React Three Fiber.