fix(types): remove use of r162 depreciated types (#1875)

README.md

@@ -2825,7 +2825,7 @@ type FBOSettings = {
   samples?: number
   /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
-} & THREE.WebGLRenderTargetOptions
+} & THREE.RenderTargetOptions
 
 export function useFBO(
   /** Width in pixels, or settings (will render fullscreen by default) */

src/core/Backdrop.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { BufferAttribute } from 'three'
+import { PlaneGeometry, BufferAttribute } from 'three'
 
-const easeInExpo = (x) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10))
+const easeInExpo = (x: number) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10))
 
 export type BackdropProps = JSX.IntrinsicElements['group'] & {
   floor?: number
@@ -11,7 +11,7 @@ export type BackdropProps = JSX.IntrinsicElements['group'] & {
 }
 
 export function Backdrop({ children, floor = 0.25, segments = 20, receiveShadow, ...props }) {
-  const ref = React.useRef<THREE.PlaneGeometry>(null!)
+  const ref = React.useRef<PlaneGeometry>(null!)
   React.useLayoutEffect(() => {
     let i = 0
     const offset = segments / segments / 2

src/core/CameraShake.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useFrame, useThree } from '@react-three/fiber'
-import { Euler } from 'three'
+import { Vector3, Euler } from 'three'
 import { SimplexNoise } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
@@ -11,7 +11,7 @@ export interface ShakeController {
 
 type ControlsProto = {
   update(): void
-  target: THREE.Vector3
+  target: Vector3
   addEventListener: (event: string, callback: (event: any) => void) => void
   removeEventListener: (event: string, callback: (event: any) => void) => void
 }

src/core/GizmoHelper.tsx

@@ -22,7 +22,7 @@ const [q1, q2] = [/* @__PURE__ */ new Quaternion(), /* @__PURE__ */ new Quaterni
 const target = /* @__PURE__ */ new Vector3()
 const targetPosition = /* @__PURE__ */ new Vector3()
 
-type ControlsProto = { update(): void; target: THREE.Vector3 }
+type ControlsProto = { update(): void; target: Vector3 }
 
 export type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
   alignment?:

src/core/MeshTransmissionMaterial.tsx

@@ -66,6 +66,12 @@ interface Uniform<T> {
   value: T
 }
 
+interface Shader {
+  uniforms: { [uniform: string]: Uniform<any> }
+  vertexShader: string
+  fragmentShader: string
+}
+
 declare global {
   namespace JSX {
     interface IntrinsicElements {
@@ -117,7 +123,7 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
       buffer: { value: null },
     }
 
-    this.onBeforeCompile = (shader: THREE.Shader & { defines: { [key: string]: string } }) => {
+    this.onBeforeCompile = (shader: Shader & { defines: { [key: string]: string } }) => {
       shader.uniforms = {
         ...shader.uniforms,
         ...this.uniforms,

src/core/OrbitControls.tsx

@@ -1,6 +1,6 @@
 import { EventManager, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
 import * as React from 'react'
-import type { Camera, Event } from 'three'
+import type { Camera, Event, OrthographicCamera, PerspectiveCamera } from 'three'
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
@@ -52,7 +52,7 @@ export const OrbitControls: ForwardRefComponent<OrbitControlsProps, OrbitControl
       const set = useThree((state) => state.set)
       const get = useThree((state) => state.get)
       const performance = useThree((state) => state.performance)
-      const explCamera = (camera || defaultCamera) as THREE.OrthographicCamera | THREE.PerspectiveCamera
+      const explCamera = (camera || defaultCamera) as OrthographicCamera | PerspectiveCamera
       const explDomElement = (domElement || events.connected || gl.domElement) as HTMLElement
       const controls = React.useMemo(() => new OrbitControlsImpl(explCamera), [explCamera])
 

src/core/useFBO.tsx

@@ -1,13 +1,32 @@
 import * as React from 'react'
 import * as THREE from 'three'
 import { useThree } from '@react-three/fiber'
+import { TextureEncoding } from '../helpers/deprecated'
+
+// TODO: consume this from three >r154 when SemVer allows
+type ColorSpace = 'srgb' | 'srgb-linear' | '' | string
 
 type FBOSettings = {
   /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 */
   samples?: number
   /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
-} & THREE.WebGLRenderTargetOptions
+
+  // WebGLRenderTargetOptions => RenderTargetOptions
+  wrapS?: THREE.Wrapping | undefined
+  wrapT?: THREE.Wrapping | undefined
+  magFilter?: THREE.MagnificationTextureFilter | undefined
+  minFilter?: THREE.MinificationTextureFilter | undefined
+  format?: number | undefined // RGBAFormat;
+  type?: THREE.TextureDataType | undefined // UnsignedByteType;
+  anisotropy?: number | undefined // 1;
+  depthBuffer?: boolean | undefined // true;
+  stencilBuffer?: boolean | undefined // false;
+  generateMipmaps?: boolean | undefined // true;
+  depthTexture?: THREE.DepthTexture | undefined
+  encoding?: TextureEncoding | undefined
+  colorSpace?: ColorSpace | undefined
+}
 
 // 👇 uncomment when TS version supports function overloads
 // export function useFBO(settings?: FBOSettings)

src/helpers/deprecated.ts

@@ -1,3 +1,5 @@
+import * as THREE from 'three'
+
 /**
  * Sets `BufferAttribute.updateRange` since r159.
  */