https://github.com/gsimone/use-capture

🎥 Record react-three-fiber scenes with ccapture.js
https://github.com/gsimone/use-capture

Last synced: 9 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gsimone/use-capture
• Owner: gsimone
• Archived: true
• Created: 2020-08-08T11:31:57.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-04-01T08:51:19.000Z (over 4 years ago)
• Last Synced: 2025-09-22T19:54:09.549Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.44 MB
• Stars: 58
• Watchers: 4
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎥 use-capture [![npm version](https://badge.fury.io/js/use-capture.svg)](https://badge.fury.io/js/use-capture)

Record react-three-fiber scenes with [ccapture.js](https://github.com/spite/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](https://zgi8e.csb.app/)

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

```jsx

import useCapture from "use-capture";

function App() {

  

  const [bind, startRecording] = useCapture({ duration: 2, fps: 60 });

  return (

    <>

    

      {/* 💡 not having a clear color would glitch the recording */}

      

      

    

  );

}

```

#### 2️⃣ call the `startRecording` function

```jsx

 ⏺️ Start Recording 

```

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