π₯ use-capture
Record react-three-fiber scenes with ccapture.js
Notes
- Not yet ready for general use, if you try it let me know βοΈ
- Gif format doesn't work yet
Usage
Check a simple example on codesandbox
react-three-fiber
canvas:
1οΈβ£ bind useCapture to your import useCapture from "use-capture";
function App() {
const [bind, startRecording] = useCapture({ duration: 2, fps: 60 });
return (
<>
<Canvas
// π‘ preserveDrawingBuffer is mandatory
gl={{
preserveDrawingBuffer: true,
}}
onCreated={bind}
>
{/* π‘ not having a clear color would glitch the recording */}
<color attach="background" args={["#000"]} />
<Scene duration={duration} />
</Canvas>
);
}
startRecording
function
2οΈβ£ call the <button onClick={startRecording}> βΊοΈ Start Recording </button>
Your file will start downloading as soon as it's done.