r3f-canvas-record

This package provides a React hook for recording a canvas in @react-three/fiber using canvas-record.

Installation

1npm install r3f-canvas-record

Usage

1import { Canvas, useThree } from '@react-three/fiber';
2import { useControls, button } from 'leva';
3import { RecorderOptions, useCanvasRecorder } from 'r3f-canvas-record';
4
5function Recorder(options: RecorderOptions) {
6  const state = useThree();
7
8  const { startRecording, stopRecording } = useCanvasRecorder(state, options);
9
10  useControls({
11    '⏺ start': button(() => {
12      startRecording();
13    }),
14    '⏹ stop': button(() => {
15      stopRecording();
16    }),
17  });
18
19  return null;
20}
21
22function App() {
23  return (
24    <Canvas
25      gl={{
26        // Set preserveDrawingBuffer to true
27        preserveDrawingBuffer: true,
28      }}
29    >
30      {/* Set clear color to record properly */}
31      <color attach="background" args={['#fff']} />
32      {/* Add your scene components to render here */}
33      <Recorder frameRate={60} duration={3} />
34    </Canvas>
35  );
36}

The useCanvasRecorder hook returns an object with the following properties:

• startRecording: Function to start recording
• stopRecording: Function to stop recording
• isRecording: Boolean indicating if recording is in progress
• getStats: Function to get recording statistics

You can pass options to change the frame rate, encoder, and more. See the canvas-record documentation for more info.

License

MIT