gsimone / use-capture

🎥 Record react-three-fiber scenes with ccapture.js

🎥 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

1️⃣ bind useCapture to your react-three-fiber canvas:

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>
  );
}

2️⃣ call the startRecording function

<button onClick={startRecording}> ⏺️ Start Recording </button>

Your file will start downloading as soon as it's done.