useSyncedCamera

Sync multiple cameras position/quaternion/rotation in react-three/fiber

You can view a demo here, or watch below:

f1959dc74467ecb3.mp4

Installation

yarn add use-synced-camera

Usage

import useSyncedCamera from 'use-synced-camera'

import { useThree } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function SceneA() {
  const update = useSyncedCamera(useThree)
  
  return (
    <>
      <Model />
      <OrbitControls onChange={update} />
    </>
  )
}

function SceneB() {
  const update = useSyncedCamera(useThree)
  
  return (
    <>
      <Model />
      <OrbitControls onChange={update} />
    </>
  )
}

function App() {
  return (
    <Canvas>
      <SceneA>
    </Canvas>
    <Canvas>
      <SceneB>
    </Canvas>
  )
}

License

MIT