-
Notifications
You must be signed in to change notification settings - Fork 750
/
LayoutCamera.tsx
38 lines (33 loc) · 1.13 KB
/
LayoutCamera.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import * as React from "react"
import { PerspectiveCamera as PerspectiveCameraImpl } from "three"
import { mergeRefs } from "react-merge-refs"
import { LayoutCameraProps } from "./types"
import { motion } from "../render/motion"
import { useLayoutCamera } from "./use-layout-camera"
import { ThreeMotionProps } from "../types"
import { extend } from "@react-three/fiber"
extend({ PerspectiveCamera: PerspectiveCameraImpl })
type Props = JSX.IntrinsicElements["perspectiveCamera"] &
LayoutCameraProps &
ThreeMotionProps
/**
* Adapted from https://github.com/pmndrs/drei/blob/master/src/core/PerspectiveCamera.tsx
*/
export const LayoutCamera = React.forwardRef((props: Props, ref) => {
const { cameraRef } = useLayoutCamera<PerspectiveCameraImpl>(
props,
(size) => {
const { current: cam } = cameraRef
if (cam && !props.manual) {
cam.aspect = size.width / size.height
cam.updateProjectionMatrix()
}
}
)
return (
<motion.perspectiveCamera
ref={mergeRefs([cameraRef, ref]) as any}
{...props}
/>
)
})