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

Add the Render component to you react-three-fiber Canvas

import { Recorder } from 'use-capture'

<Canvas>
  ...yourScene
  <Recorder duration={2} framerate={30} />
</Canvas>

NOTE: the Recorder component doesn't need to wrap around your app but make sure it's inside the <Canvas />

Animate using the recorder progress or playhead

const { getProgress } = useCapture()

useFrame(() => {
  // eg. full rotation
  mesh.current.rotation.x = getProgress() * Math.PI * 2 
})

start recording by using the hook anywhere in your app

const { startRecording } = useCapture()

<button onClick={startRecording}>Record</button>

Requisites

Set a clear color on the canvas
set preserveDrawingBuffer=true on the renderer

<Canvas
  // 💡 preserveDrawingBuffer is mandatory
  gl={{
    preserveDrawingBuffer: true,
  }}

  // 💡 not having a clear color would glitch the recording
  onCreated={({gl}) => {
    gl.setClearColor('#000')
  }}
>