use-capture
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

🎥 use-capture npm version

Record react-three-fiber scenes with ccapture.js

Notes

  • 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.

Package Sidebar

Install

npm i use-capture

Weekly Downloads

81

Version

0.4.0

License

MIT

Unpacked Size

187 kB

Total Files

12

Last publish

Collaborators

  • gsimone