Package Exports

use-capture

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 (use-capture) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎥 use-capture

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.

use-capture