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

WIP 🎥 use-ccapture

Record react-three-fiber scenes with ccapture.js

Discussion: https://github.com/react-spring/drei/issues/84

Test local

yarn && yarn start

Notes

the ccapture.js dependency is a git submodule of a fork, until the original is updated & published
Gif format doesn't work yet

Usage

Basic example

import {Canvas, useFrame} from 'react-three-fiber'
import { Recorder, useCapture } from 'use-ccapture';

export const App = () => {

  const ref = useRef() 

  const { getProgress } = useCapture()
  useFrame(() => {
    ref.current.rotation.x = getProgress()
  }) 
  
  return (
    <Canvas
        gl={{ preserveDrawingBuffer: true }}
        onCreated={({gl}) => gl.setClearColor('#000')}
      >
        <mesh ref={ref} />
      <Recorder duration={2} framerate={60} />
    </Canvas>
  );
}

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

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