fix: misc type issues (#2283)

src/core/ArcballControls.tsx

@@ -67,6 +67,7 @@ export const ArcballControls: ForwardRefComponent<ArcballControlsProps, ArcballC
       useEffect(() => {
         if (makeDefault) {
           const old = get().controls
+          // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
           set({ controls })
           return () => set({ controls: old })
         }

src/core/DeviceOrientationControls.tsx

@@ -46,6 +46,7 @@ export const DeviceOrientationControls: ForwardRefComponent<
     React.useEffect(() => {
       if (makeDefault) {
         const old = get().controls
+        // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
         set({ controls })
         return () => set({ controls: old })
       }

src/core/FlyControls.tsx

@@ -42,6 +42,7 @@ export const FlyControls: ForwardRefComponent<FlyControlsProps, FlyControlsImpl>
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({ controls })
       return () => set({ controls: old })
     }

src/core/Image.tsx

@@ -125,8 +125,8 @@ const ImageBase: ForwardRefComponent<Omit<ImageProps, 'url'>, THREE.Mesh> = /* @
       transparent,
       side,
       ...props
-    }: Omit<ImageProps, 'url'>,
-    fref: React.ForwardedRef<THREE.Mesh>
+    },
+    fref
   ) => {
     extend({ ImageMaterial: ImageMaterialImpl })
     const ref = React.useRef<THREE.Mesh>(null!)

src/core/MapControls.tsx

@@ -55,6 +55,7 @@ export const MapControls: ForwardRefComponent<MapControlsProps, MapControlsImpl>
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({ controls })
       return () => set({ controls: old })
     }

src/core/OrbitControls.tsx

@@ -1,12 +1,14 @@
 import { EventManager, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
 import * as React from 'react'
-import type { Camera, Event, OrthographicCamera, PerspectiveCamera } from 'three'
+import { Camera, Event, OrthographicCamera, PerspectiveCamera } from 'three'
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
-export type OrbitControlsChangeEvent = Event & {
-  target: EventTarget & { object: Camera }
-}
+type ExtractCallback<T, E extends string> = T extends { addEventListener(event: E, callback: infer C): void }
+  ? C
+  : never
+
+export type OrbitControlsChangeEvent = Parameters<ExtractCallback<OrbitControlsImpl, 'change'>>[0]
 
 export type OrbitControlsProps = Omit<
   ReactThreeFiber.Overwrite<
@@ -98,6 +100,7 @@ export const OrbitControls: ForwardRefComponent<OrbitControlsProps, OrbitControl
       React.useEffect(() => {
         if (makeDefault) {
           const old = get().controls
+          // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
           set({ controls })
           return () => set({ controls: old })
         }

src/core/PointerLockControls.tsx

@@ -82,6 +82,7 @@ export const PointerLockControls: ForwardRefComponent<PointerLockControlsProps,
       React.useEffect(() => {
         if (makeDefault) {
           const old = get().controls
+          // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
           set({ controls })
           return () => set({ controls: old })
         }

src/core/Sparkles.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import { PointsProps, useThree, useFrame, extend, Node } from '@react-three/fiber'
-import { shaderMaterial } from './shaderMaterial'
+import { PointsProps, useThree, useFrame, extend, MaterialNode } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 import { version } from '../helpers/constants'
 
@@ -22,45 +21,70 @@ interface Props {
   noise?: number | [number, number, number] | THREE.Vector3 | Float32Array
 }
 
-const SparklesImplMaterial = /* @__PURE__ */ shaderMaterial(
-  { time: 0, pixelRatio: 1 },
-  ` uniform float pixelRatio;
-    uniform float time;
-    attribute float size;  
-    attribute float speed;  
-    attribute float opacity;
-    attribute vec3 noise;
-    attribute vec3 color;
-    varying vec3 vColor;
-    varying float vOpacity;
-    void main() {
-      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
-      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
-      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
-      vec4 viewPosition = viewMatrix * modelPosition;
-      vec4 projectionPostion = projectionMatrix * viewPosition;
-      gl_Position = projectionPostion;
-      gl_PointSize = size * 25. * pixelRatio;
-      gl_PointSize *= (1.0 / - viewPosition.z);
-      vColor = color;
-      vOpacity = opacity;
-    }`,
-  ` varying vec3 vColor;
-    varying float vOpacity;
-    void main() {
-      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-      float strength = 0.05 / distanceToCenter - 0.1;
-      gl_FragColor = vec4(vColor, strength * vOpacity);
-      #include <tonemapping_fragment>
-      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
-    }`
-)
+class SparklesImplMaterial extends THREE.ShaderMaterial {
+  constructor() {
+    super({
+      uniforms: {
+        time: { value: 0 },
+        pixelRatio: { value: 1 },
+      },
+      vertexShader: /* glsl */ `
+        uniform float pixelRatio;
+        uniform float time;
+        attribute float size;  
+        attribute float speed;  
+        attribute float opacity;
+        attribute vec3 noise;
+        attribute vec3 color;
+        varying vec3 vColor;
+        varying float vOpacity;
+
+        void main() {
+          vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+          modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+          modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+          modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+          vec4 viewPosition = viewMatrix * modelPosition;
+          vec4 projectionPostion = projectionMatrix * viewPosition;
+          gl_Position = projectionPostion;
+          gl_PointSize = size * 25. * pixelRatio;
+          gl_PointSize *= (1.0 / - viewPosition.z);
+          vColor = color;
+          vOpacity = opacity;
+        }
+      `,
+      fragmentShader: /* glsl */ `
+        varying vec3 vColor;
+        varying float vOpacity;
+        void main() {
+          float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+          float strength = 0.05 / distanceToCenter - 0.1;
+          gl_FragColor = vec4(vColor, strength * vOpacity);
+          #include <tonemapping_fragment>
+          #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+        }
+      `,
+    })
+  }
+
+  get time() {
+    return this.uniforms.time.value as number
+  }
+  set time(value) {
+    this.uniforms.time.value = value
+  }
+  get pixelRatio() {
+    return this.uniforms.pixelRatio.value as number
+  }
+  set pixelRatio(value) {
+    this.uniforms.pixelRatio.value = value
+  }
+}
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      sparklesImplMaterial: Node<any, any>
+      sparklesImplMaterial: MaterialNode<SparklesImplMaterial, typeof SparklesImplMaterial>
     }
   }
 }

src/core/StatsGl.tsx

@@ -4,7 +4,9 @@ import * as React from 'react'
 
 import Stats from 'stats-gl'
 
-type Props = Partial<Stats> & {
+type StatsOptions = ConstructorParameters<typeof Stats>[0]
+
+type Props = Partial<StatsOptions> & {
   id?: string
   clearStatsGlStyle?: boolean
   showPanel?: number
@@ -15,7 +17,7 @@ type Props = Partial<Stats> & {
 
 export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__ */ React.forwardRef(
   ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => {
-    const gl: any = useThree((state) => state.gl)
+    const gl = useThree((state) => state.gl)
 
     const stats = React.useMemo(() => {
       const stats = new Stats({
@@ -25,24 +27,24 @@ export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__
       return stats
     }, [gl])
 
-    React.useImperativeHandle(fref, () => stats.dom)
+    React.useImperativeHandle(fref, () => stats.domElement, [stats])
 
     React.useEffect(() => {
       if (stats) {
         const node = (parent && parent.current) || document.body
-        node?.appendChild(stats.dom)
-        stats.dom.querySelectorAll('canvas').forEach((canvas) => {
+        node?.appendChild(stats.domElement)
+        stats.domElement.querySelectorAll('canvas').forEach((canvas) => {
           canvas.style.removeProperty('position')
         })
-        if (id) stats.dom.id = id
-        if (clearStatsGlStyle) stats.dom.removeAttribute('style')
-        stats.dom.removeAttribute('style')
+        if (id) stats.domElement.id = id
+        if (clearStatsGlStyle) stats.domElement.removeAttribute('style')
+        stats.domElement.removeAttribute('style')
         const classNames = (className ?? '').split(' ').filter((cls) => cls)
-        if (classNames.length) stats.dom.classList.add(...classNames)
+        if (classNames.length) stats.domElement.classList.add(...classNames)
         const end = addAfterEffect(() => stats.update())
         return () => {
-          if (classNames.length) stats.dom.classList.remove(...classNames)
-          node?.removeChild(stats.dom)
+          if (classNames.length) stats.domElement.classList.remove(...classNames)
+          node?.removeChild(stats.domElement)
           end()
         }
       }

src/core/TrackballControls.tsx

@@ -61,6 +61,7 @@ export const TrackballControls: ForwardRefComponent<TrackballControlsProps, Trac
       React.useEffect(() => {
         if (makeDefault) {
           const old = get().controls
+          // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
           set({ controls })
           return () => set({ controls: old })
         }

src/web/FaceControls.tsx

@@ -19,7 +19,8 @@ import { useFrame, useThree } from '@react-three/fiber'
 import type { FaceLandmarker, FaceLandmarkerResult } from '@mediapipe/tasks-vision'
 import { easing } from 'maath'
 
-import { VideoTexture, VideoTextureProps, WebcamVideoTexture } from '..'
+import { VideoTexture, VideoTextureProps } from '../core/VideoTexture'
+import { WebcamVideoTexture } from './WebcamVideoTexture'
 import { Facemesh, FacemeshApi, FacemeshProps } from './Facemesh'
 import { useFaceLandmarker } from './FaceLandmarker'
 

src/web/ScreenVideoTexture.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
+import * as THREE from 'three'
 import { forwardRef, useEffect } from 'react'
 import { suspend, clear } from 'suspend-react'
-import { VideoTexture, VideoTextureProps } from '..'
+import { VideoTexture, VideoTextureProps } from '../core/VideoTexture'
 
 export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
   options?: DisplayMediaStreamOptions

src/web/WebcamVideoTexture.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
+import * as THREE from 'three'
 import { forwardRef, useEffect } from 'react'
 import { suspend, clear } from 'suspend-react'
-import { VideoTexture, VideoTextureProps } from '..'
+import { VideoTexture, VideoTextureProps } from '../core/VideoTexture'
 
 export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
   constraints?: MediaStreamConstraints