Package Exports

r3f-perf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (r3f-perf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

R3F-Perf

Easily monitor the performances of your React-Three-Fiber application.

Installation

yarn add --dev r3f-perf

Usage

Simply add the the profiler component in your app

import { Canvas } from 'react-three-fiber'
import { Perf } from 'r3f-perf'

<Canvas>
  <Perf />
</Canvas>

Usage without interface : headless mode

import { Canvas } from 'react-three-fiber'
import { Perf, usePerf } from 'r3f-perf'

const PerfHook = () => {
  const { gl, log } = usePerf()
  console.log(gl, log)
  return null
}

export default function App() {
  return (
    <Canvas>
      <Perf headless />
      <PerfHook />
    </Canvas>
  );
}

SSR

The tool work with any server side rendering framework. You can try with Next and React-Three-Fiber using this starter : https://github.com/RenaudRohlinger/r3f-next-starter

Development and production build

R3F-Perf is automatically removed from the production build based on the process.env.NODE_ENV.